*
{
    padding: 0;
    margin: 0;
    font-family: "EB Garamond", serif;
}

/* HEADER */
    header
    {
        position:fixed;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    #header-sections-div
    {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
        vertical-align: middle; 
    }   

    /* Title / Name */
        #title-container-span
        {
            background-color: black;
            color: white;
            width: 100%;
            height: 7vh;
        }

        #title-container-span a, #title-container-span a:visited
        {
            text-decoration: underline;
            text-decoration-thickness: .5vh;
            text-underline-offset: 1vh;
            text-decoration-color:black;
            transition-duration: 1s;
        }

        #title-container-span a:hover
        {
            transition-duration: 1s;
            text-decoration-color: #f1f0e9;
        }

        #title-h1
        {
            line-height: 7vh;
            color: #f1f0e9;
            font-size: 2vw;
            word-spacing: 0.5vw;
        }

/* MAIN */
    main
    {
        background-color: black;
        width: 100%;
    }

    /* Quotes Cycle*/
        #quotes-container-span  
        {
            width: 100%;
            margin: 0 auto;
            height: 7vh;
            display: flex;
            flex-direction: row;
            gap: auto;
            background-color: #f1f0e9;
            color: black;
            margin-top: 7vh;
        }

        .quote-box-text
        {
            height: 100%;
            text-align: center;
        }

        #quote-h3
        {
            width: 100%;
            height: 100%;
            text-align: center;
            text-size-adjust: auto;
            font-size: 1.3vw;
            line-height: 7vh;
        }

        #quote-link-a, #quote-link-a:visited, #quote-link-a:focus
        {
            color: black;
            text-decoration: underline;
            text-decoration-color: #f1f0e9;
            transition-duration: .5s;
        }

        #quote-link-a:hover
        {
            color: black;
            text-decoration: underline;
            text-decoration-color: black;
            transition-duration: .5s;
        }

        .quotes-controls-i
        {
            transition-duration: 1s;
            color: #f1f0e9;
        }
        
        .quote-control-btn
        {
            border: none;
            background-color: none;
            width: 5%;
        }

        #quotes-container-span:hover i
        {
            transition-duration: 1s;
            font-size: 1.5vw;
            color: black;
            scale: 1.2;
            cursor: pointer;
        }

        #prev-quote-i
        {
            text-align: right;
            float: right;
        }
        
        #next-quote-i
        {
            text-align: left;
            float:left;
        }

    
    /* Featured Project */
        #featured-link-a, #featured-link-a:hover, #featured-link-a:visited, #featured-link-a:focus
        {
            text-decoration: none;
        }

        #featured-container-div
        {
            background-color: black;
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 0;
            height: 97vh;
        }

        .featured-piece
        {
            width: 50%;
            background-color: black;
            color: white;
        }

        /* Featured Info */
            #featured-title-h2
            {
                text-align: center; 
                height: 45vh;
                line-height: 78vh;
                font-size: 4vw;
                text-decoration: underline;
                text-decoration-color: black;
            }

            #featured-title-h2 b
            {
                font-size: 6vw;
            }

            #featured-subtitle-h5
            {
                color: #f1f0e9;
                text-align: center;
                font-size: 1.25vw;
                padding-top: 3vh;
            }

            #featured-separator-hr
            {
                width: 60%;
                margin: 0 auto;
            }

            #featured-blurb-p
            {
                text-align: center;
                line-height: 4vh; 
                margin: 5vh 20vh;
                font-family: "EB Garamond", serif;
                font-size: 1.25vw;
            }
            
            #featured-container-div:hover #featured-title-h2 
            {
                transition-duration: 1.5s;
                text-decoration-color: white;
                color: white;
            }

        /* Featured Image */
            #featured-image-span
            {
                width: 50%;
            }

            #featured-image
            {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    /* Projects Gallery */
        #projects-section-title-div
        {
            width: 100%;
            background-color: #f1f0e9;
            height: 10vh;
            color: black;
            text-align: center;
            border: none;
        }
        
        #projects-section-title-h2
        {
            width: 100%;
            color: black;
            background-color: #f1f0e9;
            text-align: center;
            font-size: 2.5vw;
            line-height: 10vh;
            text-decoration: underline;
            text-decoration-thickness: 1vh;
            text-underline-offset: -2.5vh;
        }

        #projects-container-div
        {
            width: 100%;
            display: grid;
            grid-template-columns: 33% 33% 33%;
            grid-template-rows: 30% 30% 30%;
            column-gap: 0.5%;
            row-gap: 4.5%;
            background-color: #f1f0e9;
            font-family: "EB Garamond", serif;
        }

        .project-link-a, .project-link-a:hover, .project-link-a:visited
        {
            color: black;
            text-decoration: none;
        }

        .project-span
        {
            width: 100%;
            background-color: #f1f0e9;
        }

        .project-span:hover .project-title-h3 
        {
            transition-duration: 1s;
            text-decoration-color: black;
        }
        
        .project-span:hover img
        {
            scale: 104%;
            transition-duration: 1s;
        }

        .project-item
        {
            display: flex;
            flex-direction: row;
            width: 95%;
            margin: 0 auto 10px auto;
            text-align: center;
        }

        .project-image
        {
            width: 100%;
            height: 100%;
            transition-duration: 1s;
        }

        .project-title-h3
        {
            width: 95%;
            font-size: 1.5vw;
            text-align: center;
            text-decoration: underline;
            text-decoration-color: #f1f0e9;
            transition-duration: .5s;
        }
        
        .project-divisor-vert-hr
        {
            width: 0;
            border: 1px solid black;
            margin-left: 3.5%;
            margin-top: 5%;
            margin-bottom: 5%;
        }

        .project-blurb-p
        {
            text-align: center;
            font-size: 1vw;
            width: 95%;
        }

@media (max-width: 800px)
{
    #title-h1
    {
        font-size: 3vh;
    }

    #quote-h3
    {
        width: 100%;
        height: 100%;
        font-size: 1vh;
        line-height: 7vh;
    }

    #quote-link-a, #quote-link-a:visited, #quote-link-a:focus
    {
        width: 100%;
        height: 100%;
    }

    #featured-container-div
    {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .featured-piece
    {
        width: 100%;
    }
    
    #featured-title-h2
    {
        text-align: center; 
        height: 20vh;
        line-height: 20vh;
        font-size: 10vw;
        text-decoration: underline;
        text-decoration-color: black;
    }

    #featured-title-h2 b
    {
        font-size: 15vw;
    }

    #featured-subtitle-h5
    {
        font-size: 4vw;
        padding-top: 0;
    }

    #featured-blurb-p
    {
        line-height: 4vh; 
        margin: 5vh 5vh;
        font-size: 4vw;
    }
    
    #featured-image-span
    {
        width: 100%;
    }
    
    #projects-section-title-div
    {
        height: 10vh;
    }
    
    #projects-section-title-h2
    {
        font-size: 3vh;
        line-height: 10vh;
        text-underline-offset: -1.5vh;
    }

    #projects-container-div
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-bottom: 100px;
    }

    .project-title-h3
    {
        width: 100%;
        font-size: 4.5vh;
    }
    
    .project-divisor-vert-hr
    {
        display: none;
    }

    .project-blurb-p
    {
        font-size: 2vh;
        width: 100%;
    }
}