#top-navbar {
    opacity: 1;
    z-index: 100;
}

.graphic-height {
    background: black;
    overflow: hidden;
    height: 100%;
    border-radius: 50%;
}


.container-graphic {
    margin-left: -22%;
    margin-right: -23.4%;
    margin-top: -1%;
    padding-bottom: 10px;
    overflow: hidden;
    height: 100%;
    /* margin: 0 18%; */
}

.graphic {
    padding-bottom: 10px;
}

/* @media (max-width: 1220px) {
    .container-graphic {
        margin: 0 13.5%;
    }
}

@media (max-width: 1147px) {
    .container-graphic {
        margin: 0 9%;
    }
}

@media (max-width: 1020px) {
    .container-graphic {
        margin: 0 4.5%;
    }
}

@media (max-width: 932px) {
    .container-graphic {
        margin: 0 0;
    }
} */

.main-graphic-text {
    width: 100%;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 20pt;
}

@media (min-width: 550px) {
    .main-graphic-text {
        font-size: 22pt;
    }
}

.main-graphic-text p {
    color: var(--phh-blue);
    text-shadow: 0px -2px 5px white, 0px 2px 5px white;
    font-family: "Alternate Gothic No.3 D", monospace;
    position: relative;
}

.main-graphic-text #link {
    cursor: pointer;
}

.main-graphic {
    width: 99%;
    aspect-ratio: 1830 / 1340;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.main-graphic.title {
    width: 58%;
    top: 33%;
    aspect-ratio: 564 / 139;
    z-index: 10;
    background-image: url("/assets/img/graphic/logo_main_transparent_bg.webp");
}

#main-vid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    cursor: pointer;
}

.video-container {
    margin-top: 69px;
    height: 623.42px;
    overflow: hidden;
}

@media (max-width: 340px) {
    .video-container {
        margin-top: 114px;
    }
}

#video-text h3 {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 20;
    color: white;
    text-shadow: 0 0 10px black;
    font-size: 20pt;
}

#mute-symbol {
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 20;
    color: white;
    font-size: 20pt;
    text-shadow: 0 0 10px black;
    pointer-events: none;
}

@media (max-width: 550px) {
    #video-text h3 {
        font-size: 10pt;
    }
    #mute-symbol {
        font-size: 10pt;
    }
}



.foreground {
    z-index: 10;
}

.main-graphic.foreground#nvg {
    width: 101%;
    background-image: url("/assets/img/graphic/NightVision.webp");
}

.foreground#play-btn {
    width: 10%;
    aspect-ratio: 1/1;
    opacity: 0.5;
    transition: opacity 0.3s ease; 
    background-image: url("/assets/img/graphic/playbtn2.png");
}

.foreground#play-btn:hover {
    opacity: 0.9;
}

@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}

#grainy-texture:after {
    /* content is required when using :after */
    content: "";
    /* The animation */
    animation: grain 8s steps(10) infinite;
    /* The grainy image */
    background-image: url("/assets/img/graphic/paper-pattern.webp");
    /* Specify a height and width above and beyond the page header for movement */
    height: 600%;
    width: 600%;
    left: -300%;
    top: -300%;
    /* We're using opacity in place of a transparent image */
    opacity: 0.33;
    /* We'll need this when the animation kicks in to hold the position of the texture */
    position: fixed;
}

.background#green {
    background-color: #ceffd6;
}

#black {
    background-color: black;
    opacity: 0;
    z-index: -1;
    transition: opacity 1s ease-out;
}

.background#humvee {
    background-image: url("/assets/img/graphic/HumveePlane.webp");
    opacity: 0;
    transition: opacity 1.1s ease-out;
}

.small-graphic {
    width: 100%;
    aspect-ratio: 1/1;
    z-index: 5;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.headlight {
    background-image: url("/assets/img/graphic/headlight.webp");
    transform: translate(-50%, -50%);
    top: 67.2%;
    transition: width 2s ease-out;
}

.headlight#left-headlight {
    left: 43.2%;
}

.headlight#right-headlight {
    left: 60.75%;
}

@keyframes pulse {
    0% {width: 25vw}
    50% {width: 30vw}
    100% {width: 25vw}
}

.pulse-effect {
    animation-name: pulse;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-delay: 2.8s;
}



/* .animated-graphic {
    width: 15vw;
    z-index: 5;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@keyframes tire-smoke {
    0% {transform: translateX(-0.2%)}
    50% {transform: translateX(0.2%);}
    100% {transform: translateX(-0.2%);}
}

.animated-graphic.tire-smoke {
    width: 62vw;
    z-index: 4;
    aspect-ratio: 884 / 162;
    top: 80%;
    left: 23%;
    background-image: url("/assets/img/graphic/tire-smoke.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation-iteration-count: infinite;
    animation-duration: 0.4s;
    animation-name: tire-smoke;
}

@keyframes right-smoke {
    0% {transform: translate(-5%, 10%);
        transform: rotate(-5deg)}
    20% {transform: rotate(5deg)}
    40% {transform: rotate(-5deg)}
    50% {transform: translate(5%, -10%);}
    60% {transform: rotate(5deg)}
    80% {transform: rotate(-5deg)}
    100% {transform: translate(-5%, 10%);
        transform: rotate(5deg)}
}

.animated-graphic.right-smoke {
    aspect-ratio: 357 / 230;
    top: 77.5%;
    left: 68%;
    background-image: url("/assets/img/graphic/right-smoke.png");
    animation-iteration-count: infinite;
    animation-duration: 0.4s;
    animation-name: right-smoke;
}

@keyframes left-smoke {
    0% {transform: translate(5%, 10%)}
    50% {transform: translate(-5%, -10%)}
    100% {transform: translate(5%, 10%)}
}

.animated-graphic.left-smoke {
    aspect-ratio: 285 / 194;
    top: 76%;
    left: 23%;
    background-image: url("/assets/img/graphic/left-smoke.png");
    animation-iteration-count: infinite;
    animation-duration: 0.4s;
    animation-name: left-smoke;
} */