/* Body */
body {
    font-family: 'Assistant', sans-serif;
    margin: 0;
    padding: 0;
    /* padding-bottom: 2000px; */
    /* background-color: #140d22ff; OLD */
    background-color: #0E0E0E;
}

/* Top Bar Container [Top Bar]*/

#top_bar_container {

    /* Define the Bounding region for the Container */
    z-index: 50;                                                     /* The container must always be the top visiible layer */
    height: 40px;                                                   /* The height of the Top Bar container */
    position: sticky;                                               /* Ensures the container is stuck to the top of the screen when scrolling */
    top: 0;                                                         /* The sticky-top is set at  the top of screen */
    background-color: #0097a7ff;                                  /* Light blue background color */

    /* Positioning of contents*/
    display: flex;                                                  /* Flexbox to store every Dropdown */
    flex-direction: row;                                            /* Row setting rather than column */
    flex-wrap: nowrap;                                              /* Don't wrap if the screen gets squished */
    align-items: center;                                            /* Align vertically center */
    justify-content: space-between;                                 /* Align horizonetally center */

}

/* Top Bar [Aidan Maldonado, [Career, Contact, About]] */
.top_bar {

    /* Styling */
    z-index: 50;                                                     /* This layer will stay on the top visible layer */
    height: 100%;                                                   /* Height is the same is the Container this button resides in */
    background-color: #0097a7ff;                                  /* Button Background Color: Transparent */
    border-color: transparent;                                      /* Transparent borders for all top_bar elements */
    color: white;                                                 /* Text Color */
    text-align: center;
    align-content: center;
    cursor: pointer;
}

    #name {
        font-size: 1.75em;
        width: 270px;
    }

    #name:hover {
        z-index: 50;
        background-color: rgb(129, 233, 245);
        color: rgb(7, 66, 72);
    }

    #dropdown_container {

        /* Defining the Boudning region for the Container */
        margin-right: 40px;
        height: 100%;

        /* Positioning of contents */
        display: flex;                                                  /* Flexbox to store every Dropdown */
        flex-direction: row;                                            /* Row setting rather than column */
        flex-wrap: nowrap;                                              /* Don't wrap if the screen gets squished */
        justify-content: space-between;                                 /* Align horizonetally center */
    }

        .individual_dropdown_container {
            z-index: 100;
            
            /* Styling */
            width: 90px;
            height: 100%;
            background-color: red;
            border-color: none;

            /* Positioning */
            display: grid;
            align-content: center;
            justify-self: center;
        }   

            .dropdown_button {
                /* Styling */
                width: inherit;
                height: 100%;
                background-color: #0097a7ff;
                border: none;
                color: inherit;
                font-size: inherit;
                align-content: center;
                justify-content: space-evenly;
                cursor: pointer;

                /* Positioning */
                z-index: 100;
                position: absolute;
            } 

            .dropdown_button:hover {
                box-shadow: 0px 2px 3px 0px black;
            }

            .below_button {
                /* Styling */
                background-color: rgb(7, 66, 72);
                border: none;
                height: 100%;
                width: 80px; /* RIGHT HERE GPT */
                font-size: 0.8em;
                color: white;
                cursor: pointer;
            
                /* Positioning of contents */
                z-index: 30;
                position: absolute;
                justify-self: center;
                align-self: center;
                /* margin-right: 100px; */
                padding: 0;
                display: none;
            }

            .below_button:hover {
                /* To do */
                background-color: rgb(12, 138, 136);
            }





/* Background Image */

#bg_image_container {
    /* background-color: green; */
    height: 472px;
    width: 100vw;
    margin: 0px;
    overflow: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 60px;
    z-index: -10;
}

#bg_void {
    z-index: 0;
    /* background-color: darkslateblue; */
    height: 512px;

}


#bg_image {
    height: 100%;
    width: auto;
    object-fit: cover;
    z-index: 0;
}

#main_buttons_container {
    /* Begins at 40 + 520 = 560px from the top, travels to 40px*/
    /* Travel total is 560 - 40 = 520 px, reshape height 140->40 */
    /* Change 520/100 = 5.2/1 */

    /* Define the Bounding region for the Container */
    z-index: 50;                                                     /* The container must always be the top visiible layer */
    height: 70px;                                                   /* The height of the Button container */
    position: sticky;                                               /* Ensures the container is stuck to the top of the screen when scrolling */
    top: 40px;                                                      /* The sticky-top is set at 40px from the top of screen */


    /* Positioning of contents*/
    display: flex;                                                  /* Flexbox to store every Button */
    flex-direction: row;                                            /* Row setting rather than column */
    flex-wrap: nowrap;                                              /* Don't wrap if the screen gets squished */
    align-items: center;                                            /* Align vertically center */
    justify-content: center;                                        /* Align horizonetally center */
    /* background-color: red; */
    /* width: 500px;
    left: 500px; */

}

.main_button {

    /* Styling */
    z-index: 50;                                                     /* This Button will stay on the top visible layer */
    height: 100%;                                                   /* Height is the same is the Container this button resides in */
    width: 13.01vw;                                                 /* The width is fixed to be proportional to the viewport width */
    background-color: #ece3d9ff;                                  /* Button Background Color: Tofu */ 
    border: solid 3px;                                              /* Solid Border of Width = 3px */
    border-color: #ddd3c7ff #bda58bff #998064ff #c7b8a6ff;  /* Top, Right, Bottom, Left*/
    color: #0e0e0eff; /* Text Color */
    font-size: 1.2em; /* Font-Size relative to Button Height? */
    cursor: pointer;

    /* Positioning */
    margin: 1px; /* Add a margin of 10px between each Button*/

}

.main_button:hover {
    background-color: rgb(244, 237, 229);
    box-shadow: 0px 2px 5px 0px black;

}

.main_button:active {
    background-color: #ffeb8cff;
    color: white;
    font-size: 5em;
}



#project_column {
    z-index: 2;
    background-color: #0E0E0E;
    padding-top: 50px;
    display: none;
}

.project_column_elements {
    /* display: none; */
    height: 100%;
    position: absolute;
}

.project {
    /* display: block; */
    /* display: none; */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    width: 60vw;
    background-color: #0E0E0E;;
    /* z-index: 2; */
}

.project_spacer {
    /* display: block; */
    /* display: none; */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    width: 70vw;
    background-color: #0E0E0E;;
    /* z-index: 2; */
}

#about_modal {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#close_button {
    position: absolute;
    top: 30px; 
    right: 30px; 
    font-size: 20px; 
    background-color: #fff; 
    color: black; 
    border: none; 
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10000;
}

#credit {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 16px;
    font-family: 'Assistant', sans-serif;
    text-align: center;
    pointer-events: none;
}