:root{
    --light-blue: #5D76AD;
    --deep-blue: #1A2144;
    --black: #0A0908;
    --platinium-white: #D7DFEA;
    --sun-yellow: #EEDB9B;
    --waldo-yellow: #FFE48A;
    --waldo-blue: #6491F2;
    --waldo-green: #255E21;
    --dark-shadow: rgba(0, 0, 0, 0.25);
}

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

@font-face {
    font-family: 'Sekaiwo';
    src: url(./Sekaiwo-Regular.otf);
}

html{
    background-color: var(--black);
}

/*
Overlay
*/


#overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
    mix-blend-mode: multiply;
}

#overlay>*{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#overlay .noise-svg{
    opacity: 0.5;
    object-fit: cover;
}

#overlay .sepia{
    background: radial-gradient(circle,rgba(117, 66, 0, 0.1) 0%, rgba(78, 44, 0, 0.2) 100%);
}

#overlay .paper-texture{
    object-fit: cover;
}

/*
Header (#wave)
*/

#wave{
    display: block;
    background-color: var(--light-blue);
    height: 132vh;
    width: 100%;
    position: relative;
    overflow: hidden visible;
}

#wave h1{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Sekaiwo', sans-serif;
    font-size: min(10vh, 10vw);
    color: var(--platinium-white);
    text-shadow: 0 0 5px var(--dark-shadow);
    z-index: 10;
}

#wave #sun{
    background-color: var(--sun-yellow);
    width: min(25vh, 25vw);
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--offset-x) var(--offset-y) var(--blur-radius) 1px var(--dark-shadow);
}


#wave>svg{
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    filter: drop-shadow( var(--offset-x) var(--offset-y) var(--blur-radius) var(--dark-shadow));
    animation: wave-move 6s ease-in-out infinite;
}

#wave>svg:nth-of-type(1){
    bottom: 19%;
    left: 25%;
    animation-delay: -3s;
}


#wave>svg:nth-of-type(2){
    scale: -1 1;
    bottom: 21%;
}


@keyframes wave-move{
    0%, 100%{
        transform: translateX(-2.5%);
    }
    50%{
        transform: translateX(2.5%);
    }
}

@media screen and (max-aspect-ratio: 1/1){
    #wave #sun{
        top: 30%;
    }    
}

/*
Main
*/

section{
    min-height: 100vh;
}

#ocean{
    height: 500vh;
    background: linear-gradient(to bottom, var(--light-blue), var(--deep-blue) 60%);
}

#space{
    height: 400vh;
    background: linear-gradient(to bottom, var(--deep-blue), var(--black));
}

#orbit{
    background-color: var(--black);
}

/*
Footer
*/

footer{
    height: 30vh;
    overflow: hidden;
}