@font-face {
        src: url(media/fonts/AMOceanusBold.ttf);
        font-family: 'borntokill';
}
@font-face {
        src: url(media/fonts/Chomsky.woff2);
        font-family: 'kayoko';
}
body {
        display: flex;
        justify-content: center;
}
header {
        text-align: center;
        padding: 10px;
        background-color: #25222a;
        border-style: solid;
        border-color: #e4e4e4;
}
h1 {
        font-family: borntokill;
        font-size: 3.5em;
        margin: 0px;
}
h2 {
        font-family: kayoko;
        font-size: 3em;
        font-style: italic;
        margin: 0px;
        margin-top: -10px;
}
h4 {
        margin-bottom: 10px;
}
h1, h2, h3, h4, p {
        margin-left: 8px;
}
.flex-container {
        color: white;
        display: flex;
        flex-direction: column;
        max-width: 40vw;
        justify-content: center;
        gap: 10px;
}
main {
        display: flex;
        flex-direction: column;
        gap: 10px;
}
article {
        background-color: #25222a;
        border-style: solid;
        border-color: #e4e4e4;
}
.counter {
        display: flex;
        justify-content: center;
}
footer {
        color: black;
        font-size: 0.6em;
        text-align: center;
        background-color: white;
        padding: 1px;
        margin-right: 35%;
        margin-left: 35%;
}
footer a {
        color: black;
}
.buttons-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background-color: #25222a;
        border-style: solid;
        border-color: #e4e4e4;
        padding-top: 5px;
        padding-bottom: 5px;
}
.buttons {
        display: flex;
        justify-content: center;
        gap: 2px;
}

.buttons>img {
        width: 88px;
        height: 31px;
        image-rendering: pixelated;
        background-color: rgba(0, 0, 0, 0.0);
}
/*
 * identification
 */
.identification {
        display: flex;
        font-size: 1.25em;
        padding: 20px;
        gap: 20px;
        background-color: #25222a;
        border-style: solid;
        border-color: #e4e4e4;
}
.id-img {
        width: 20%;
}
.id-img img {
        width: 100%;
}
.id-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
}
.id-text h3 {
        margin: 2px;
}
.id-text p {
        margin: 2px;
}
/*
 * Charms
 */
.charms {
        display: flex;
}
.charms ol {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        list-style-type: decimal-leading-zero;
        text-wrap: nowrap;
}
.charms img {
        width: 100%;
        height: 100%;
}
/*
 *Models
 */
.kayoko-model-container {
        display: flex;
        max-width: 100%;
        margin: 10px;
}
.kayoko-model {
        overflow: hidden;
        border-color: #e4e4e4;
        border-style: solid;
        transition: all 0.5s ease;
}
.kayoko-model img {
        height: 35em;
}
.kayoko-model:hover {
        padding-right: 10.25%;
        padding-left: 2.25%;
}

@media only screen and (max-width: 2176px) {
        .flex-container {
                max-width: 45vw;
        }
}
@media only screen and (max-width: 1693px) {
        .flex-container {
                max-width: 55vw;
        }
        .kayoko-model:hover {
                padding-right: 25.25%;
                padding-left: 2.25%;
        }
}
@media only screen and (max-width: 1385px) {
        .flex-container {
                max-width: 65vw;
        }
}
@media only screen and (max-width: 1171px) {
        .flex-container {
                max-width: 75vw;
        }
        .kayoko-model:hover {
                padding-right: 15.25%;
                padding-left: 2.25%;
        }
}
@media only screen and (max-width: 1016px) {
        .flex-container {
                max-width: 85vw;
        }
}
@media only screen and (max-width: 895px) {
        .flex-container {
                max-width: 98vw;
        }
}