/* version: 0.0 */
:root {
    --background: black;
    --secondary: rgb(255, 0, 255);
    --text: white;
}

body {
    margin: 0;
    /* padding: 0; */
    font-weight: 500;
    Font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: var(--text);

    overflow: hidden;
    height: 100vh;
}

main {
    height: 100vh;
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}



section {
    scroll-snap-align: start;
    min-width: 100%;
    height: auto;
    min-height: 100vh;
    display: inline-block;
    background-color: var(--background);
    position: relative;
}

.landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    /* text-transform: uppercase; */
}

.landing h1 span {
    display: inline-block;
    font-size: 12vw;
    position: relative;
    bottom: 0%;

    visibility: hidden;
    animation-name: landing-fade;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    white-space: pre;
}

@keyframes landing-fade {

    0% {
        visibility: inherit;
        opacity: 0;
        bottom: -20%;
    }

    70% {
        bottom: 5%;
        opacity: 1;
    }

    100% {
        /* opacity: 1; */
        visibility: inherit;
    }

}

.landing h1, .landing h2 {
    margin: 0.1em;
}

.landing h2 {
    --size: 7vw;
    font-size: var(--size);
    line-height: var(--size);
    height: var(--size);
    overflow: hidden;
    color: var(--secondary);
    animation: 1s opacity-change 2s ease forwards;
    opacity: 0;
}


@keyframes opacity-change {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    padding: 2rem;
    text-align: center;
}

.content h1 {
    font-size: 5vw;
}

.content h2 {
    font-size: 2vw;
}