body{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -5px;
    background-color: #ced8dd;
}

body div{
    margin:0.5rem;
}

#topbarPlaceholder{
    height:70px;
}
#menu{
    position:fixed;
    top:-5px;
    left:-10px;
    display: flex;
    flex-direction: row;
    justify-content: right;
    width: 100vw;
    margin-top: -10px;
    /* padding-right: 50px; */
    background-color: #8b8c89;
    color: #e7ecef;
}

#menu{
    color:#edf2f5;
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    text-decoration: none;
}



ul{
    margin-block-end: 0;
}

#topbar ul{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-between;
}
.menuOption{
    padding-top: 20px;
    padding-bottom:20px;
    padding-left: 10px;
    padding-right:10px;
}

#topbar li:hover{
    cursor: pointer;
    background-color: #616e6e;
}

#gallery-option{
    padding-right:40px;
}
#about{
    display:flex;
    margin:3rem 0%;
    border-radius: 2px;
    padding:1rem 1rem;
    width:60%;
    height:80%;
    flex-direction: row;
    justify-content: center;
    background-color: #6096ba;
    width: min(90%, 800px);
}

#biography{
    width:50%;
}

#bio-intro{
    font-family: "Ubuntu Sans Mono", monospace;
}

#bio-text{
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    /* max-width: 50%; */
}

#bio-text a{
    color: #a3cef1;
    text-decoration: none;
}

#bio-text a:hover{
    color: #e7ecef;
}

#about h3{
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    color: #e7ecef;
    margin: 1rem;
}
#about div{
    margin:2rem 0rem;

}


#self-image{
    width: 40%;
    height: 40%;
    padding-left:2rem;
}
#self-image img{
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
#biography{
    padding-right:2rem;
}

#contact h3{
    font-family: "Roboto", sans-serif;
    font-weight:400;
}
#contact li{
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    list-style-type: none;
    list-style-position: outside;
    padding-left: -10px;
    margin: 0.5rem;
}
#contact ul{
    list-style-type: none;
    padding-left: 0px;
}

#resumeContact{
    width:70%;
    padding:1rem 2rem;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #a3cef1;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    border-radius: 10px;
}

#resumeContact a{
    text-decoration: none;
    color: #274c77;
}
#resumeContact a:hover{
    color: #8b8c89;
}

#projects{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
    width:100%
}
#projects-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:95%;
    background-color: #6096ba;
    /* padding:0.5rem 0.5rem; */
    border-radius: 10px;
}

h4{
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #e7ecef;
    margin: 1rem;
}

.single-project{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
    margin: 1rem;
    padding: 1rem;
    background-color: #a3cef1;
    border-radius: 10px;
}

.single-project img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.project-content{
    padding: 1rem;
    width:60%;
    background-color: #e7ecef;
    margin:1rem;
    border-radius: 10px;
}

.project-content h3{
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    /* font-style: italic; */
    color: #274c77;
    margin: 1rem;
}

.project-content p{
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    margin: 1rem;
}

.project-content a{
    color: #274c77;
    font-family: "Ubuntu Sans Mono", monospace;
    text-decoration: none;
}

.project-content a:hover{
    color: black;
}

#gallery{
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #6096ba;
    border-radius: 10px;
    padding-bottom: 1rem;
}



#gallery-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 95%;
    background-color: #e7ecef;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
}
#gallery-content img{
    width: 90%;
    margin: 1rem;
    padding: 1rem;
    background-color: #a3cef1;
    border-radius: 10px;
}

#footer{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #6096ba;
    padding: 1rem;
    border-radius: 10px;
    font-family: "open sans", sans-serif;
}

@media screen and (max-width: 1200px){
    /* #about{
        flex-direction: column;
    } */
    #biography{
        padding-right:0;
    }
    #projects{
        width: 80%;
    }
    .single-project{
        width: 90%;
    }
}

@media screen and (max-width: 900px){
    #about{
        flex-direction: column;
        align-items: center;
    }
    #self-image{
        width: 100%;
        height: 100%;
    }
    #self-image img{
        width: 90%;
    }
    #biography{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
    
@media screen and (max-width: 800px){

    #self-image img{
        width: 90%;
        /* height: auto; */
    }
    .single-project{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .project-content{
        padding: 1rem;
        width:60%;
        background-color: #e7ecef;
        margin:1rem;
        border-radius: 10px;
    }

}

@media screen and (max-width:580px){
    #resumeContact{
        flex-direction: column;
        align-items: center;
    }
}