:root {
    --parallax: #121318;
    --background: #15161C;
    
    --banner: #0E4686;
    --text: #E4E4E4;
    --accent1: #6897CE;
    --accent1-light: #BAC9DA;
    --accent2: #5DA57A;
    --shadow: drop-shadow(5px 5px #00000077);
}

html {
    scroll-padding-top: 90px;
}

body {
    background: var(--background);
    color: var(--text);
    font-size: 20px;
    font-family: "Nunito", sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}
 
/* BANNER */

.banner {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0px;
    background-color: var(--banner);
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo, .navButtonContainer {
    padding: 0px 36px;
}

.logo {
    width: 60px;
    filter: var(--shadow);
}

.navButtonContainer {
    
    & button {
        cursor: pointer;
        background-color: transparent;
        border: none;
        color: var(--text);
        font-size: 1.1rem;
        filter: var(--shadow);
        margin: 0 8px;
        transition: scale 0.2s;

        &:hover {
            scale: 1.1;
        }
    }
}

/* BODY */

.main {
    z-index: 2;
    background-color: var(--background);
    width: 70%;
    min-width: 750px;
    position: relative;
    padding: 0 64px;
}

.parallax {
    width: 100vw;
    background: var(--background);
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    justify-content: center;
}

.parallax::before {
    background: url()
}

section {
    border-bottom: 2px solid var(--accent2);
    padding: 24px 0;
    opacity: 1;
    animation: fade-in 3s linear;
}

@keyframes fade-in {
    0%, 30% {opacity: 0}
    100% {opacity: 1}
} 
 
.about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 70px;
    /* Min height = 100vh - banner height - top margin */
    min-height: calc(100vh - 70px - 12px - 180px); 
    font-size: 1.2em;
}

.myDescription{
    line-height: 1.4;
    width: 90%;
}

h1 { 
    font-family: "Italianno", serif;
    font-size: 6rem;
    margin: 60px 0 0 0;
    text-align: center;
    position: relative;
    color: var(--accent2);
    filter: var(--shadow);
    top: 70px;

    animation: slide 2s ease-out;
}

@keyframes slide {
    0% {left: calc(-50vw - 250px)}
    100% {left: 0}
}

.contact {
    text-align: center;
    margin-bottom: 16px;
    border: none;

    & .socials {
        display: flex;
        justify-content: center;
    }

    & img {
        width: 50px;
        filter: var(--shadow);
        transition: scale 0.5s;

        &:hover {
            scale: 1.1;
        }
    }
}

/* EXTRAS */

h2 {
    text-align: center;
    color: var(--accent1);
    filter: var(--shadow);
}

/* SMALL WINDOW (TABLET) STYLING */
@media only screen and (max-width: 1200px) {
    .main {
        width: 100%;
        min-width: 0px;
        min-width: 400px;
    }


}

/* PHONE STYLING */
@media only screen and (max-width: 800px) {
    .main {
        font-size: 0.85em;
        padding: 12px;
        min-width: 0px;
    }

    .banner {
        justify-content: center;

        img {
            visibility: collapse;
        }
    }
}