/*Mid laptops*/
@media (max-width: 84.5rem){

    .left{
        width: 25vw;
    }
    .right{
        width: 50vw;
    }
    .list{
        flex-direction: column;
    }
    .section-title{
        margin-left: 3rem;
    }
    .resume{
        margin-left: 2rem;
    }

     /*Project pages*/
    .gallery-content{
        width: 90vw;
    }
    .gallery-content > div{
        min-width: 35vw;
    }
    iframe{
        height: 250px;
    }

}

/*Small laptops*/
@media (max-width: 64rem){
    
    .resume{
        padding: 3%;
        margin: 1.5%;
    }
    .left{
        width: 30vw;
    }
    .right{
        width: 55vw;
    }

    /*Homepage*/
    .biotext{
        padding: 15%;
    }
    .button-download{
        width: 80%;
    }

    /*Project pages*/
    .gallery-content > div{
        min-width: 40vw;
    }

}

/*Tablets*/
@media (max-width: 50rem){

    .listitem{
        flex-direction: column; 
        align-items: center;
    }
    .listcontent{
        align-items: center;
    }
    .left{
        width: 85vw;
    }
    .right{
        width: 85vw;
        margin-bottom: 1rem; 
    }
    h1{
        font-size: 4rem;
    }
    h2{
        margin-bottom: 0;
    }
    .left > p{
        margin-bottom: 1rem;
    }

    /*Navigation button*/
    .button-nav {
        flex-direction: column;
        justify-content: center;
      }
      
    .button-nav img{
        max-width: 35px;
        margin-right:0;
    }

    /*Homepage Resume*/
    .job-title{
        flex-direction: column;
    }
    .myphoto{
        display: none;
    }
    .resume{
        margin: 2%;
    }
    .resume > .left{
        flex-direction: column;
    }
    .button-download{
        width: 90%;
        margin-top: 0;
    }
    .resume-item:nth-of-type(1){ order: 2;}
    .resume-item:nth-of-type(2){ order: 1;}
    
    /*Project pages*/
    .projectpage-title{
        display: flex;
    }
    .project-details{
        align-items: center;
    }
    .gallery-content{
        margin: 2rem 0 2rem 0;
    }
    .gallery-content > div{
        min-width: 50vw;
    }
    td, th{
        padding: 0 2% 2% 0;
    }
    th{
        width: 10%;
    }
    .report{
        margin-top: 1rem;
    }

}

/*Phones*/
@media (max-width: 35rem){

    h1{
        font-size: 3rem;
    }
    h2{
        padding-top: 1rem;
    }
    .right{
        margin: 0;
    }


    /*Navigation bar*/
    .button-nav-logo{
        font-size: 1.5rem;
        padding-left: 7%;
        padding-top: 5%;
    }
    .button-nav{
        padding: 0;
        font-size: 1rem;
    }
    .mainnav{
        margin-right:3%;
    }
    .navtext{
        display: none;
    }

    /*Top button*/
    #top-button {
        bottom: 20px;
        right: 20px;
        font-size: 1rem;
        padding: 0.75rem;
        border-radius: 100px;
      }

    /*Bio Section*/
    .bio-content > .right{
        width: 100vw;
    }
    .biotext{
        padding: 10%;
        margin: 3%;
    }

    /*Project pages*/
    .project-details > .right{
        margin-bottom: 1rem;
    }
    .section-title{
        margin-left: 1.5rem;
    }
    .gallery-content > div{
        min-width: 70vw;
    }
    iframe{
        height: 150px;
    }


}