@import url('https://fonts.cdnfonts.com/css/terminal-grotesque-open');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@media (max-aspect-ratio: 4/3) {

.dashboard{
    font-size: 1.8vmax;
    text-align: center;
}


.about-us-section{font-size:1.3vmax;}
.about-us-section h1{font-size:3.3vmax;}
.about-us-section h2{font-size:2.2vmax;}
.about-us-section p{font-size:1.5vmax;}
.about-us-section ul li{font-size:1.4vmax;}

    #story-parallax {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background-color: #000000;
        min-height: 100vh;
        width: 100vw;
    }

    .quinn-character-s1{top: 5.5%;}



    .noti,
    #secret-vivi,
    .volume-tool-container,
    .inv-tool-icon,
    .inv-wrapper,
    #inv-overlay,
    .volume-container,
    .Quinn-lantern,
    [id^="S2-"],
    [id^="S3-"],
    [id^="S4-"],
    [id^="S5-"],
    [id^="S6-"],
    [id^="S7-"]
    {display: none !important;}


    .khladt-links {
        flex-direction: column; /* Stack buttons vertically */
        gap: 5vh;
    }


    .content-box img{width: 80vw;}


.fog.fone {
    background-position: 0%;
    opacity: 1.0;
    top: -9%;
    animation-duration: 85s;}
.fog.ftwo {
    background-position: 50%;
    top: -3%;
    animation-duration: 180s; }
.fog.fthree {
    background-position: 100%;
    top: -5%;
    opacity: 0.6;
    animation-duration: 300s;}

.site-footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8vmax;}

}