html {
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    height: 100%;
}

body {
    position: absolute;
    background-color:black;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: antiquewhite;
}

video {
    display: flex;
    position: relative;
    min-height: 100vh;
    min-width: 100vw;
    /* visibility: hidden; */
}

.vid {
    position: fixed;
    height: 100vh;
    width: 100vw;
    -o-object-fit: fill;
    object-fit: fill;
    z-index: -1;
}

.audio-btn {
    position: fixed;
    opacity: .75;
}

img {
    border-radius: 2%;
}

p {
    background-color: RGBA(0,0,0,0.45);
    border: 2px solid darkgray;
    border-radius: 1.5%;
    padding: .75%;
    text-align: center;
}

main {
    position: relative;
    margin-left: 10vw;
    margin-right: 10vw;
    height: 100%;
}

/* IDs for animation. JS code set to toggle animation */

#coverArt {
    transition: all 0.65s ease-in;
    opacity: 0;
}

#coverArt.show {
    opacity: 1;
    transform: top(40px);
    transition-delay: .85s;
}

#coverArt.showText {
    opacity: 1;
    transform: top(40px);
}

#characters {
    transition: all 0.35s ease-in;
    opacity: 0;
}

#characters.show {
    opacity: 1;
    transform: top(40%);
}

/* Cover, characters, and flag flex definitions */

.cover-flex {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2.5vw;
    height: 100%;
    margin-top: 87.5dvh;
}

.cover-img {
    flex-basis: 150px;
    max-width: 30%;
    max-height: 40%;
}

.cover-text {
    width: 80%;
    font-size: 1.5rem;
}

.cipher-flex {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5vw;
    margin-top: 25dvh;
    height: 100%;
}

.cipher-img {
    flex-basis: 50px;
    max-height: 25%;
    max-width: 35%;
    border-left: calc(1px + .35vw) solid #1137df;
    border-right: calc(1px + .35vw) solid #1137df;
}

.cipher-text {
    font-size: calc(.65rem + 1vw);
}

.pixy-flex {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5vw;
    margin-top: 35dvh;
    height: 100%;
}

.pixy-img {
    flex-basis: 50px;
    max-height: 25%;
    max-width: 35%;
    border-right: calc(1px + .35vw) solid #e52218;
}

.pixy-text {
    font-size: calc(.70rem + 1vw);
}

.pj-flex {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5vw;
    margin-top: 30dvh;
    height: 100%;
}

.pj-img {
    flex-basis: 50px;
    max-height: 25%;
    max-width: 35%;
}

.pj-text {
    font-size: calc(.85rem + 1vw);
}

/* Flag flex */

#flags {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.flag-flex {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin-top: 35dvh;
    gap: calc(2rem + 4vw);
}

.flag-flex > img {
    max-width: 55%;
}

.flag-text-flex {
    display: flex;
    justify-content: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.flag-text {
    max-width: 75%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    font-size: calc(.80rem + 1vw);
}

/* IDs for flags, for IntersectionObserver & animations */

#ustio {
    transition: opacity 1.05s ease-in;
    opacity: 0;
}
#ustio.show {
    opacity: 1;
}

#belka {
    transition: all 1.05s ease-in;
    opacity: 0;
}
#belka.show {
    opacity: 1;
}

#fText {
    transition: all 2.30s ease-in;
    opacity: 0;
}
#fText.show {
    top: 15%;
    opacity: 1;
}

@media (min-width: 320px) and (max-width: 768px) {
    main {
        margin-left: 3vw;
        margin-right: 3vw;
    }
    .cover-text {
        width: 100%;
        font-size: calc(.75rem + 1vw);
    }
    #characters > img {
        flex-basis: 50px;
        max-height: 65%;
        max-width: 75%;
    }
    .cipher-flex {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2.5vw;
        margin-top: 25dvh;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .cipher-img {
        border-left: calc(2px + .55vw) solid #1137df;
        border-right: calc(2px + .55vw) solid #1137df;
    }
    .cipher-text {
        font-size: calc(.75rem + 1vw);
    }
    .pixy-flex {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2.5vw;
        margin-top: 35dvh;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .pixy-img {
        order: 1;
        border-right: calc(1px + .60vw) solid #e52218;
    }
    .pixy-text {
        order: 2;
        font-size: calc(.60rem + 1vw);
    }
    .pj-flex {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2.5vw;
        margin-top: 30dvh;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .pj-text {
        line-height: calc(1.25rem + 1vw);
        font-size: calc(.75rem + 1vw);
    }
    .flag-flex {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        margin-top: 35dvh;
        gap: calc(1rem + 2vw);
    }
    .flag-flex > img {
        max-height: 35%;
        max-width: 45%;
    }
    .flag-text-flex {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .flag-text {
        max-width: 80%;
        font-size: calc(.55rem + 1.5vw);
    }
}