/*Changes width of html element based on screen size for large desktops*/
@media only screen and (max-width: 1199.98px) {    
    html {width: 100%;}  
}
@media only screen and (min-width: 1200px) {    
    html {width: 80%;}
}
@media only screen and (min-width: 1500px) {    
    html {width: 70%;}
}
@media only screen and (min-width: 2000px) {    
    html {width: 55%;}  
}

/*Vertical Ipad*/
@media only screen and (max-width: 899.98px) {
    .line{width: 40rem;}
}

@media only screen and (max-width: 767.98px) { 
    .line{width: 32rem;}

    .about-p {
        width: 30rem;
        font-size: 1.1rem;
    }

    .drop-down-tabs { font-size: 0.8rem}

    .filler{padding: 3rem;}

    .container {height: 23rem;}

    .headshot {height: 15rem;}   

    .header-ul > li {font-size: 0.9rem;}

    .h2-header {font-size: 1.3rem;}

    h1 {font-size: 2rem;} 

    .text-links {display: none;}
}

/*Vertical medium sized phones*/
@media only screen and (max-width: 540px) { 
    .filler{padding: 2rem;}

    .container {height: 15rem;}

    .tabs-header {font-size: 1.1rem;}
    
    .line{width: 25rem;}

    .skills-ul > li {
        text-align: center;
        list-style-type: none;
    }

    .about-p {
        width: 23rem;
        font-size: 1rem;
    }
    .headshot {height: 10rem;}  

    .header-ul {padding: 0rem 0rem 0rem 1rem;}

    .header-ul > li {
        font-size: 0.8rem; 
        list-style-type: none;
    }

    .h2-header {font-size: 1rem;}

    h1 {font-size: 1.5rem;} 

    textarea, label, input {width: 25rem;}
}

/*mobile phones*/
@media only screen and (max-width: 508.98px) { 
    .h2-header, h1 {
        font-weight: 500;
        text-align: center;
    }

    .headshot {margin: 1rem;} 

    .header-ul {display: none;}

    .container {
        flex-direction: column;
        height: 20rem;
    }

    .h3-aboutme  {
        font-size: 1.2rem;
        margin-left: 1.5rem;
    }

    .h2-aboutme {
        font-size: 1.4rem;
        margin-left: 1.5rem;
    }

    .about-p {
        margin-left: 1.5rem;
        width: 90%;
        font-size: 1rem;
    }

    .line{width: 18rem;}

    .skills-h3 {text-align: center;}

    .skills-ul > li {
        text-align: center;
        font-size: 1rem;;
        list-style-type: none;
    }

    .sad {
        font-size: 1.1rem;
        white-space: nowrap;
    }

    .drop-down {display: inline;}

    .drop-down-tabs {
        padding: 0.8rem;
        border-top: solid 0.5px rgb(155, 155, 155);
        border-bottom: solid 0.5px rgb(155, 155, 155);
    }

    textarea, label, input {width: 90%;}

    .filler-porto {height: 25rem;}

}