*{
    font-family: 'Roboto Slab', serif;
}

[img]{
    max-width: 100%;
    height: auto;
    
}

::selection {
    background: greenyellow; 
}

body{
    margin: 0;
    /* width: 100%;
    height: 100%; */
    box-sizing: border-box;
    
}

 #header ~ *{
    margin-left: 10em;
    margin-right: 10em;
}

#header_list {
    display:flex;
    list-style: none;
    gap: 1.5em;
    align-items: baseline;
    margin: 1.25em;

}
#h_proj, #h_exp{
    font-size: 1.5em;
}

li.logo{
    font-size: 1.875em;
    flex-grow:3;
    margin-left:0.5em;

}
#header_list li:nth-child(3){
    flex-grow:1;
}

#header{
    padding: 0.75em;
    background-color: #000;
    color: white;
    position: fixed; /* Fixed position */
    top: 0; /* Stick to the top of the viewport */
    left: 0;
    right: 0;
    z-index: 1000; 
    opacity:0.85;
}

#h_proj:hover,#h_exp:hover{
    cursor:pointer;
    color:grey;
}

#title{
    margin-left: 3em;
    margin-right: 5em;
    margin-top: 3em;
}

#first{
    display:flex;
    padding-top:1em;
}

#first p{
    margin-top:0em;
}

#me img{
    border-radius: 50%;
    border:#0c356a 0.5em solid
}

#me{
    display:flex;
    border:rgb(184, 8, 43) 0.2em solid;
    border-radius: 50%;
    margin-bottom: 1em;


}

#intro{
    margin-top:3em;
}

#college-logos{
    display:flex;
    flex-direction: column;
    margin-right: 4em;
}

.c-logo{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.i-logo{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* text-align: center; */

}

.i-logo:hover{
    transform: scale(1.3);

}
/* tab related styling */
#tabs{
    display:flex;
    margin-top: 3em;
    margin-left:1em;
    text-align: center;
    font-size:1.3em;
    margin-left: 10em;
    margin-right: 10em;
}

#tabs .tab:nth-child(2), #tabs .tab:nth-child(3){ /*setting the unselected tabs */
    background-color: #c2b19f;
}

#tabs .tab:nth-child(2) p, #tabs .tab:nth-child(3) p{ /*setting the unselected p */
    background-color:rgba(209, 209, 209, 0.829);
}

#tabs .tab:nth-child(1){
    background-color: #f4dfc8;

}

#tabs .tab:nth-child(1) p{
    background-color: white;
}

.tab{
    border-top:0.094em  solid black;
    border-left:0.094em  solid black;
    border-right:0.094em  solid black;
    padding-top:0.3em;
    height:3em;
    width:8em;
    border-radius: 0.5em 0.5em 0 0;
    font-weight: bold;
    font-size:1em
}

#tabs .tab:hover{
    width:9em;
    background-color: #f4dfc8;
    .tab-p{
        background-color: white;
    }
    cursor:pointer;

}

.tab-p{
    font-family: 'Indie Flower', cursive;
    font-size:1.1em;
}

.tab-p{
    background-color: white;
}

#tabs div:nth-child(2), #tabs div:nth-child(3){
    margin-left: 4em;

}

#folder{
    display:flex;
    flex-direction: column;
    border:0.156em solid black;
    background-color: #f4dfc8;
    margin-left: 10em;
    margin-right: 10em;
    /* height:100em; */
    border-radius: 1em;
}


 /* end of tab and project styling */

#supercontainer{
    display:flex;
    justify-content: center;
}
#skill-container{
    margin-left: 4em;
    margin-bottom:10em;
    /* display:grid; */
    /* grid-template: 5em / repeat(8,10em) */
    display:flex;
    justify-content: center;
}

.skill{
    margin-left: 1.5em;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-color:#F4EAE0;
    border-radius:1em;
    height:8em;
    width:8em;
    font-weight: bold;
}

.skill:hover{
    background-color: #ddd5cc;
    transform: scale(1.4);
}

.skill >img, .skill>p{
    padding:0em;
    margin:0;

}

#folder_title{
    text-align: center; 
    padding-top:0.5em; 
    font-size: 3.5em;
}

#exp{
    background-color: #0c356a;
    margin:1em;
    border-radius: 1em;
    color:white;
    padding-bottom:1.5em;
}

#exp ::selection, #projects ::selection{
    background:black
}


.subtitle{
    display:flex;
    font-size:2em;
    margin-left:1em;
    color:blanchedalmond;
    /* background-color:transparent; */
}

.role{
    flex-grow: 1;
}

.text{
    font-size:1.4em;
    margin-left:1.5em;
    padding-bottom:2em;
}


#projects{
    background-color: #614124;
    margin:1em;
    border-radius: 1em;
    color:white;
    padding-bottom:1.5em;
}

.link_button{
    border-radius: 1em;
    font-size:0.8em;
}

.link_button > a{
    text-decoration: none;
    color:black;
}


#viz1697768884837 {
    width: 100%; /* Ensure it takes full width of its container */
    max-width: 100%; /* Ensure it doesn't exceed its container width */
    height: auto; /* Let the height adjust proportionally based on width */
    max-height: 30em; /* Limit the maximum height */
}

.tableauPlaceholder {
    position: relative;
    padding-bottom: 1%; /* This ensures aspect ratio; adjust as needed */
    overflow: hidden;
    border-radius: 1em;
}
#embedded{
    padding-right: 2em;

}

#honors{
    border-radius: 1em;
    margin-left: 2em;
}
#footer{
    display:flex;
}
#footer > img{
    border: 0.5em solid blanchedalmond;
}
#footer > div{
    font-size: 1.5em;
    margin-left: 2em;
    margin-right: 2em;
}

#largeContainer{
    display:flex;
    margin-right:2em;
}

#spotlight{
    margin-left:2em;
    width:100%;
    max-width: 50vw;
    max-height:50vw;
    height:auto;
    width:auto;
}

#footer >img{
    margin-left:2em;
    width:100%;
    max-width: 50vw;
    max-height:60vw;
    height:auto;
    width:auto;
}

/* mobile adjustments */
@media (max-width: 1200px) {

    #title{
        margin-top: 4em;
        margin-right:1em;
        margin-left:1em;
        font-size:1em;
    }    

    #first{
        display:flex;
        flex-direction: column;
    }

    #first, #intro, #skills, #tabs, #folder {
        margin-left: 1em;
        margin-right: 1em;
        font-size:1em;
    }
    #college-logos, #intro {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    #college-logos {
        flex-direction: row;
        justify-content: center;
        margin-right:1em;
        /* flex-wrap: wrap; */
        /* justify-content: space-around; */
    }
    .c-logo {
        margin: 0.5em;
    }
    .i-logo{
        margin:0.5em;
    }
    #supercontainer {
        flex-direction: column;
        align-items: center;
    }
    #skill-container {
        flex-wrap: wrap;
        justify-content: center;
        margin: 1em;
    }
    .skill {
        margin: 0.5em;
        width: 7em;
        height: 7em;
    }
    #tabs {
        flex-direction: row;
        align-items: center;
    }
    .tab {
        width: 30%;
        text-align: center;
        margin: 0.5em 0;
        font-size: 1.5em;
    }
    #footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #footer > img, #footer > div {
        margin: 1em 0;
    }
    #largeContainer{
        display:flex;
        flex-direction:column;
    }

    .role{
        flex-grow: 1;
        margin-right:1em;
    }

}