*{
    font-family: 'space mono', 'open sans', 'arial';
    margin: 0;
    padding: 0;
    --light-yellow: #FFF3B4;
    --dusty-pink: #E7B7B9;
    --dark-gray: #202327;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body{
    background-color: var(--dark-gray);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

main{
    width: 100%;
    color: white;
}

/* ------------------------------------------------------------------------------------------------------------- */

/* navigation */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--dusty-pink); */
    /* padding: 12px 36px; */
    /* position: fixed; */
    width: 100%;
    height: 80px;
    z-index: 5;
    box-sizing: border-box;
    padding: 0 20px;
    color: white;
}

    nav ul{
        list-style: none;
        display: flex;
    }

    nav ul li{
        margin: 0 6px;
    }

    nav ul li button{
        background: none;
        padding: .5em 1em;
        border: solid 2px transparent;
    }

    nav a{
        text-decoration: none;
        color: white;
    }

    nav ul li button .nav-proj{
        color: var(--dusty-pink);
    }

    nav ul li button:hover{
        border: solid 2px var(--dusty-pink);
        padding: .5em 1em;
        border-radius: 8px;
    }


/* ------------------------------------------------------------------------------------------------------------- */

/* hero section */
/* background */
#hero{
    height: 100vh;
    margin-top: 0;
    align-content: center;
}

    /* grid */
    #hero-container{
        /* border: solid 1px red; */
        width: max(50%, 1020px);
        margin: 0 auto;
    }

    #hero-container > *{
        margin: 10px 0;
    }

    /* welcome header */
    #header{
        height: auto;
        width: 100%;
        align-self: center;
        /* border: solid 1px lightblue; */
    }

    #header h1{
        font-size: 6rem;
        color: var(--dusty-pink);
    }
    u{
        color: var(--light-yellow);
    }

    #header p{
        max-width: 50%;
    }

    /* cta buttons */
    #cta-container{
        width: min(50%, 400px);
        height: auto;
    }

        #cta-container button{
            width: 12em;
            height: 4em;
            border-radius: 8px;
            /* box-shadow: 6px 6px 0 0 var(--dusty-pink); */
            font-size: 1em;
        }

        #cta-container button:hover{
            background-color: var(--light-yellow);

        }

        #hire-btn{
            background-color: var(--dusty-pink);
            border: solid 4px white;
            color: black;
        }

        #view-btn{
            background-color: white;
            border: solid 4px var(--dusty-pink);
        }

    /* find me */
    #connect{
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        height: 100px;
        width: auto;
        padding: 0 4px 8px;
    }

        #connect .frame-top{
            top: -8px;
            width: calc(100% + 8px);
            left: -4px;
        }

        #connect > a > img{
            width: 50px;
            fill: var(--dusty-pink);
        }

        #connect > a > img:hover{
            fill: var(--light-yellow);
        }

/* ------------------------------------------------------------------------------------------------------------- */

/* grid */
#about-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: start;
    height: auto;
    width: 960px;
    margin: 40px auto;
}
    #about-description{
        grid-column: 1/2;
    }

    #tech-container{
        grid-column: 2/3;
        /* grid-column: 1/3;
        grid-row: 2/3; */
    }

    /* #about-container img{
        max-width: 400px;
        max-height: 400px;
        grid-column: 1/2;
        grid-row: 1/3
    } */


/* ------------------------------------------------------------------------------------------------------------- */

/* grid with items */
#tech-stack-container{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .tech-item{
        display: inline-block;
        padding: 0.5em 1em;
        /* white-space: nowrap; */
        /* overflow: hidden; */
    }

    .tech-item > img{
        width: 20px;
        display: inline-block;
    }

    .tech-item > p{
        display: inline-block;
    }

    .tech-item:hover{
        background-color: var(--dusty-pink);
        color: black;
        border-radius: 8px;
    }


/* ------------------------------------------------------------------------------------------------------------- */

/* projects section */
#projects{
    /* height: min(auto, 800px); */
}

/* contents inside section */
#projects-container{
    height: 100%;
    width: 960px;
    margin: 40px auto;
}

    /* list containing all project items */
    #projects-item-list{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 20px 0;
    }
    
    .project-item{
        /* border: solid 1px greenyellow; */
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
    }

    .project-item:hover{
        background-color: var(--dusty-pink);
        border-radius: 8px;
        color: black;
    }

    .project-item > img{
        max-width: 100%;
        grid-column: 1 / 2;
    }

    .project-item > .item-content{
        grid-column: 2 / 3;
    }

    #all-proj-btn,
    .project-item > .item-content > a > button{
        padding: 1em 1.5em;
        background-color: white;
        border: none;
        border-radius: 8px;
        margin: 12px 0;
    }

    #all-proj-btn:hover{
        background-color: var(--dusty-pink);
    }

    .project-item > .item-content > a > button:hover{
        background-color: var(--light-yellow);
    }
    
    #projects-item-list a{
        text-decoration: none;
        color: white;
    }

/* contact section */
#contact{
    margin-bottom: 80px;
}

#contact-container>a>img{
    width: 40px;
}