*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Variable";
    src: url('/font/ExposureTrialVAR.ttf') format('truetype');
}

@font-face {
    font-family: "season";
    src: url('/font/season.woff2') format('woff2');
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}

html {
    overscroll-behavior: none;
}

body {
    height: 400vh;
}

.bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url('/img/bg.gif');
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

.header {
    width: max-content;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    /* font-family: "Variable";
    font-variation-settings: "EXPO" 0; */
    font-family: "season";
    font-variation-settings: "slnt" 0, "SERF" 0, "wght" 311;
    transition: font-variation-settings 0.1s ease-out; 
    color: white;
    filter: blur(1.4px);
    opacity: 0.9;
}

.header span:not(:first-of-type) {
    margin-left: -3rem;
}

.slogan-1,
.slogan-2 {
    z-index: 100;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    font-family: monospace;
    color: white;
    text-transform: uppercase;
    text-align: center;
}
.slogan-1 {
    top: 1rem;
}
.slogan-2 {
    bottom: 1rem;
}

.text {
    animation: logoAnimation 2s infinite alternate;
}

/* .slogan-1 img,
.slogan-2 img {
    width: 100%;
} */

/* .logo-1  {font-variation-settings: "EXPO" 100;}
.logo-2  {font-variation-settings: "EXPO" 90;}
.logo-3  {font-variation-settings: "EXPO" 40;}
.logo-4  {font-variation-settings: "EXPO" 10;}
.logo-5  {font-variation-settings: "EXPO" -10;}
.logo-6  {font-variation-settings: "EXPO" -30;}
.logo-7  {font-variation-settings: "EXPO" -60;}
.logo-8  {font-variation-settings: "EXPO" -70;}
.logo-9  {font-variation-settings: "EXPO" -80;}
.logo-10 {font-variation-settings: "EXPO" -90;} */

@keyframes logoAnimation {
    from {
        font-variation-settings: "slnt" 0, "SERF" 0, "wght" 302;
    }
    to {
        font-variation-settings: "slnt" -11, "SERF" 99, "wght" 900;
    }
}