html
    {
        --background-color: #151515;
        --background-color-light: rgba(15, 15, 15, .6);
        --font-color: #e4e4e4;
        --shadow-color: #585b5f;
        --accent-color1: #223b57;
        --accent-color2: #abacb5;

    }

body
    {
        background-color: var(--background-color);
        color: var(--font-color);
        font-family: "fira sans", sans-serif;
        margin: 0;
    }

#progress-bar 
    {
    position: fixed;
    top: 0;
    left: 0;
    height: 7px; 
    background-color: rgba(49, 83, 122, .7); 
    width: 0;
    z-index: 100; 
    transition: width 0.3s; 
    }


header
    {
        display: flex;
        align-items: baseline;
        margin: 2em;
    }
 
#logo img
    {
        color: var(--font-color);
        height: 3em;
        flex: 1;
    }

#spacer
    {
        flex: 1;
    }

nav
    {
        flex: 1;
    }

#nav-menu
    {
        display: flex;
        justify-content: space-around;
    }

#nav-menu a
    {
        color: var(--font-color);
        text-decoration: none;
        letter-spacing: 1px;
        /*  transition effect that makes border shrink on hover */
        background: linear-gradient(var(--font-color) 0 0) center bottom / 100% .8px no-repeat;
        transition: 0.1s ease-in;
        font-size: 125%;
    }

#nav-menu a:hover
    {
        background-size: 0 .8px;
        color: var(--shadow-color);
    }

.change1
    {
        transform: translate(0, 7.5px) rotate(-45deg);
        width: 1.3em;
    }

.change2
    {
        opacity: 0;
    }

.change3
    {
        transform: translate(0, -7.5px) rotate(45deg);
        width: 1.3em;
    }


#greeting
    {
        font-family: "montserrat", sans-serif;
        font-size: 500%;
        letter-spacing: .02em;
        margin: 15% 30% .2em 15%;
    }

#title
    {
        font-family: "montserrat", sans-serif;
        font-size: 2em;
        color: var(--accent-color1);
        margin: 0 35% auto 0;
        border-bottom: var(--accent-color1) solid 1px;
        letter-spacing: .02em;
        padding-bottom: .2em;
        padding-left: 15%;
        z-index: 10;
    }

#about-me
    {
        position: absolute;
        font-size: 1.3em;
        margin: -3em 40% 20% 15%;
        letter-spacing: .05em;
        line-height: 1.3;
        padding: 3.5em 1em 380vh 0;
        border-right: var(--accent-color1) solid 1px;
        z-index: -15;
    }

/* skills */
#skills-page
    {
        padding-top: 70vh;
    }

#skills-title
    {
        font-family: "montserrat", sans-serif;
        font-size: 400%;
        text-align: center;
    }
#skills-container
    {
        padding-top: 3em;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

.skills
    {
        margin: 3em;
        width: 2em;
    }

.skills h3
    {
        font-family: "montserrat", sans-serif;
        font-size: 1em;
        text-align: center;
    }

#experience-list
    {
        padding: 3em 20vw;
    }
#experience-list li
    {
        list-style-type: circle;
        font-size: 120%;
        padding-bottom: 1em;
    }

footer
    {
        font-size: .75em;
        text-align: center;
        border-top: var(--font-color) .02px solid;
        padding: 3em 0;
    }

/* projects */
#projects-page
    {
        padding-top: 35vh;
    }

#projects-title
    {
        font-family: "montserrat", sans-serif;
        font-size: 400%;
        text-align: left;
        padding-left: 2em;
        border-bottom: var(--accent-color1) solid 1px;
        width: 40%;
        position: absolute;
        z-index: -15;
    }


#square
    {
        width: 30vh;
        height: 30vh;
        border: var(--accent-color1) solid 1px;
        float: left;
        position: relative;
        left: 45%;
        z-index: -12;
        background-color: var(--background-color);
    } 

#projects-containter
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding-top: 4em;
        width: 100vw;
    }

.project-card
    {
        height: 40vh;
        width: 27.7425vh;
        background-color: var(--background-color);
        border: 1px, solid, var(--accent-color2);
        border-radius: 1em;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 2em;
    }

.project-card:hover, .project-card:active
    {
        border: 2px, solid, var(--accent-color2);
    }

.project-link
    {
        text-decoration: none;
    }

.card-image
    {
        height: 13.5vh;
        width: 27vh;
        margin-top: 1.7em;
    }

.card-title
    {
        font-family: "montserrat", sans-serif;
        color: var(--font-color);
        text-align: center;
    }

.card-description
    {
        padding: 0 2.5vh;
        text-align: center;
        color: var(--font-color);
        font-size: 87%;
    }

.card-stack
    {
        font-size: 70%;
        position: relative;
        text-decoration: none;
        color: var(--font-color);
    }

/* contact */
#contact-page
    {
        padding-top: 35vh;
        display: grid;
        place-items: center;
        height: 100vh;
    }

#contact-title
    {
        font-family: "montserrat", sans-serif;
        font-size: 400%;
        text-align: center;
    }

#contact-form
    {
        margin-top: -15vh;
        padding-top: 3em;
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-row-gap: 3em;
        text-align: center;
    }

.form-fields
    {
        background-color: var(--background-color);
        border: none;
        border-bottom: var(--font-color) solid .7px;
        color: rgba(228, 228, 228, .7);
        font-family: "montserrat", sans-serif;
        padding: 1em;
        width: 20vw;
    }

#name
    {
        margin-right: 3em;
        background-color: var(--background-color-light);
    }

#email
    {
        background-color: var(--background-color-light);
    }

#message
    {
        background-color: var(--background-color-light);
        border: var(--font-color) solid .7px;
        color: rgba(228, 228, 228, .7);
        font-family: "montserrat", sans-serif;
        padding: 1em;
        grid-column: 1 / span 2;
        width: calc(100% - 1em);
        padding-bottom: 7em;
        
    }

#submit-button
    {
        background-color: var(--background-color-light);
        border: var(--font-color) solid .7px;
        color: rgba(228, 228, 228, .7);
        font-family: "montserrat", sans-serif;
        text-transform: uppercase;
        padding: 2em 4em;
        grid-column: 1 / span 2;
        width: 50%;
        margin: 0 auto;
    }

@media (max-width: 950px)
    {
        #greeting
            {
                font-size: 425%;
            }
        #title
            {
                font-size: 1.6em;
            }

        #about-me
            {
                font-size: 1em;
            }
    }

@media (max-width: 845px)
/* tablet layout */
    {
        #spacer
            {
                flex: 0;
            }

        #greeting
           {
                font-size: 450%;
                margin-left: 5%;
                margin-right: 5%;
           } 

        #title
           {
                font-size: 1.75em;
                padding-left: 5%;
                margin-right: 25%;
           }

        #about-me
           {
                font-size: 1.2em;
                margin-left: 5%;
                margin-right: 30%;
                padding-bottom: 450vh;
           }

        #projects-title
            {
                width: 50%;
                font-size: 340%;
            }

        #square
            {
                height: 30vw;
                width: 30vw;
            }
    }

/* square responsive work */
@media (max-width: 720px)
    {
        #square
            {
                left: 65%;
            }
    }


@media  (max-width: 580px)
/* mobile layout */
    {
        #header-container
            {
                background-color: var(--background-color);
            }
        header
            {
                background-color: var(--background-color);
                position: relative;
                z-index: 10;
            }

        nav
            {
                position: fixed;
                right: 5%;
            }

        #nav-menu
            {
                display: none;
                position: fixed;
                font-size: 1.5em;
                z-index: 5;
                flex-flow: column wrap;
                align-self: flex-start;
                right: 2em;
                top: 3em;
                background-color: rgba(15, 15, 15, .8);
                width: 40vw;
                height: 30vh;
            }


        #spacer
            {
                flex: 1;
                flex-grow: 6;
            }

        #hamburger-menu
            {
                position: relative;

            }

        .menu-bars
            {
                width: 1.5em;
                height: .19em;
                background-color: var(--font-color);
                margin: .3em 0;
                border-radius: 2px;
            }

        #greeting
            {
                font-size: 350%;
                margin-right: 5%;
            }

        #title
            {
                font-size: 1.3em;
                margin-right: 5%;
            }

        #about-me
            {
                padding-bottom: 500vh;
                margin-right: 15%;
                font-size: 1em;
            }

        #skills-title
            {
                font-size: 300%;
            }

        #skills-container
            {
                margin: auto .5em;
            }

        .skills 
            {
                font-size: 75%;
            }
        
        #projects-title
            {
                font-size: 260%;
                padding-left: 1em;
            }

        #square
            {
                width: 30vw;
                height: 30vw;
                left: 60%;
            }

        .project-card
            {
                height: 45vh;
                width: 35vh;
            }

        .card-image 
            {
                height: 15vh;
                width: 30vh;
            }

        .card-description
            {
                font-size: 80%;
            }

        .card-stack
            {
                font-size: 50%;
            }

        #contact-title
            {
                font-size: 300%;
            }
        #contact-form
            {
                grid-template-columns: 1fr;
                justify-items: center;
            }

        #name
            {
                margin-right: 0;
            }

        .form-fields
            {
                width: 70vw;
            }

        #name, #email
            {
                grid-column: 1;
            }

        #message
            {
                grid-column: 1;
                width: 70vw;
            }
        
    }