@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    font-size: 1.5em;
}

body {
    overflow: hidden;
    margin: 0;
    font-family: "Nunito", sans-serif;
}

#background {
    z-index: -100;

    width: 100vw;
    height: 100vh;
    position: absolute;

    background: linear-gradient(to bottom, #090609, #220522);
}

#hello {
    padding-top: 3rem;
    text-align: center;
    color: #ffffff;
}

#hello h1 {
    font-size: 2.5rem;
    margin: 0;
}

#hello p {
    margin: 0.25rem 0;
}

#hello a {
    color: #e965f0;
}

#hello .small {
    font-size: .75rem;
    color: #e0e0e0;
}



@keyframes wobbleAnimation {
    0% {top: .075em;}
    50% {top: -.075em;}
    100% {top: .075em;}
}

.wobble-span {
    animation-name: wobbleAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

#nav {
    width: 100%;
    max-width: min(90rem, 1250px);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.nav-element {
    margin: 1rem;
    width: 12rem;
    height: 4rem;
    border-radius: .5rem;
    background-color: #e0e0e0;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    color: #242424;
    font-weight: 700;
    font-size: 1rem;

    transition: background-color .75s, font-size .25s;
}

.nav-element:hover {
    background-color: #a0a0a0;
    font-size: 1.15rem;
}

#nav a {
    text-decoration: none;
}

#outer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 100vh;

    overflow: hidden;
    padding: 0 1rem;
    box-sizing: border-box;
}

#face-container {
    position: relative;
    min-width: min(80%, 300px);
    width: 30%;
    max-height: 35%;
    aspect-ratio: 1 / 1;
}

#face-eyes, #face-back, #face-front {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#face-front, #face-back {
    bottom: 0;
}


#face-container img {
    height: 100%;
}



@media screen and (max-width: 1000px) {
    #hello {
        padding-top: 1.5rem;
    }

    #nav {
        flex-direction: column;
    }

    #nav a {
        width: 90%;
        margin: 0;
    }

    .nav-element {
        width: 100%;
        height: 2.5rem;
        margin: 0.5rem 0;
    }
}

@media screen and (max-height: 800px) {
    :root {
        font-size: 1.25em;
    }
}

@media screen and (max-height: 600px) {
    :root {
        font-size: 1.15em;
    }

    #hello {
        padding-top: 1rem;
    }

    #hello h1 {
        font-size: 2rem;
    }


}