/*1300px = 81em (smaller desktops)*/

@media(max-width: 81em){
    html{
        /*8px / 16px = .50 = 50%*/
        font-size: 50%
    }

    .grid--4-cols{
        grid-template-columns: repeat(3, 1fr);
    }
}

/*1010px = 63em*/
@media(max-width: 63em){
    h3{
        font-size:3.6rem;
    }

}


/*920px = 58em Large Tablet*/
@media(max-width: 58em){

    .grid--4-cols{
        grid-template-columns: repeat(3, 1fr);
    }

    .section-3{
        padding: 8.0rem;
        max-width: 120rem;
        margin: 0 auto;
    
    }
    .skills-and-knowledge-header{
        font-size: 7.4rem;
    }

    .skills{
        /* border: 2px solid black; */
        height: 12rem;
        align-items: center;
        justify-content: center;
        background-color:#0d1110;
        font-size: 3.6rem;
        text-align: center;
        position: relative;
        padding: 1.6rem;
     
    }

    h1{
        font-size: 8.6rem;
        padding: 2.0rem 0;
    
    }
    
    h2{
        font-size: 7.4rem;
        text-align: center;
        padding: 2rem 0;
        font-family: "Jersey 10", sans-serif;
        font-weight: 400;
        font-style: normal;
    
    
    }  

    .skills{
        /* border: 2px solid black; */
        height: 15rem;
        font-size: 3.6rem;
    }
}

/*850px = 53em Medium Tablet*/
@media(max-width: 53em){

    .grid--4-cols{
        grid-template-columns: repeat(3, 1fr);
    }
    .section-2{
        padding: 6.4rem
        
    }

    .section-3{
        padding: 6.4rem;

    
    }

    .skills-and-knowledge-header{
        font-size: 7.4rem;
        padding: 6.4rem 0 6.4rem 0;
    }



    h1{
        font-size: 7.4rem;
        padding: 2.0rem 0;
    
    }
    
    h2{
        font-size: 6.2rem;
        text-align: center;
        padding: 2rem 0;
        font-family: "Jersey 10", sans-serif;
        font-weight: 300;
        font-style: normal;
    
    
    }
    
    h3{
        font-size: 3.0rem;
        padding: 2.0rem 0;
    
    }
    
    p{
        font-size: 2.0rem;

    }


    /*About me*/


}

/*750px = 47em Small Tablet*/
@media(max-width:47em){

    .grid--4-cols{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--2-cols{
        grid-template-columns: repeat(1, 1fr);
    }

    .about-me-photo:nth-child(2){
        grid-row: 1;
    }

    .section-2{
        margin: 0 auto;
        text-align: center;
    }

    .skills-and-knowledge-header{
        font-size: 5.2rem;
        padding: 6.4rem 0 6.4rem 0;
    }

}

/*520px = 33em Mobile*/
@media(max-width:33em){

.skills-and-knowledge-header{
    font-size: 4.4rem;
    padding: 6.4rem 0 6.4rem 0;
}
}

/*460px = 29em Mobile*/
@media(max-width:29em){

    .skills-and-knowledge-header{
        font-size: 3.6rem;
        padding: 6.4rem 0 6.4rem 0;
    }

    .skills{
        font-size: 3.0rem;

    }

    }

    /*460px = 29em Mobile*/
@media(max-width:29em){

    html{
        /*7px / 16px = ..44 = 44%*/
        font-size: 44%
    }

    .skills-and-knowledge-header{
        font-size: 3.6rem;
        padding: 6.4rem 0 6.4rem 0;
    }

    .skills{
        font-size: 2.4rem;
    }

    h1{
        font-size: 6.2rem;
        padding: 2.0rem 0;
        font-weight: 700;
    
    }
    
    h2{
        font-size: 4.4rem;
        padding: 2rem 0;
        font-weight: 200;
        font-style: normal;
    
    
    }
    
    h3{
        font-size: 2.4rem;
        padding: 2.0rem 0;
    
    }
    
    p{
        font-size: 1.8rem;

    }

    .footer-info{
        font-size: 2.0rem;
        color: white;
    }

    }