@media (max-width: 700px) and (min-width: 600px){

    button#learn{
        width: 50%;
    }

    #About article{
        padding: 5% 2%;
    }

    #About p{
        font-size: .9em;
    }

    #owners section{
        grid-template-columns: auto auto;
        padding: 5% 5%;
    }

    #owners div{
        background: white;
        box-shadow: 0 2px 10px grey;
        /* width: 45%; */
        margin: 2%;
    }

    #skills section{
        grid-template-columns: auto;
        padding: 5% 2%;
        padding-right: 15%;
    }

    div.one{
        width: 100%;
    }

    div.two{
        width: 100%;
        margin-left: 5%;
    }

    #resources section{
        background: white;
        grid-template-columns: auto auto;
    }

}



@media (max-width: 600px) and (min-width: 500px){

    button#learn{
        width: 50%;
    }

    #About article{
        grid-template-columns: auto;
        padding: 5% 2%;
        padding-bottom: 15%;
    }

    #About p{
        font-size: .9em;
        font-weight: bold;
    }

    #owners section{
        grid-template-columns: auto;
        padding: 5% 5%;
        grid-gap: 1%;
    }

    #owners div{
        background: white;
        box-shadow: 0 2px 10px grey;
        /* width: 45%; */
        margin: 2%;
    }

    #owners img{
        width: 100%;
        height: 400px;
    }

    #skills section{
        grid-template-columns: auto;
        padding: 5% 2%;
        padding-right: 15%;
    }

    div.one{
        width: 100%;
    }

    div.two{
        width: 100%;
        margin-left: 5%;
    }

    #resources section{
        background: white;
        grid-template-columns: auto auto;
    }

    article#WeKnow{
        background: rgb(214, 214, 214);
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1%;
        padding: 5% 2%;
        width: 100%;
        margin: 5% 0;
    }

    #WeKnow div.one{
        /* height: 220px; */
        width: 100%;
    }

    #credits{
        grid-template-columns: auto auto;
        grid-gap: 8%;
    }

    .away{
        display: none;
    }

    #hideMenu{
        display: block;
        width: 8%;
        top: 0.5%;
    }




}






@media (max-width: 500px) and (min-width: 50px){

    #resources button#download{
        width: 100%;
    }

    button#learn{
        width: 50%;
    }

    #About article{
        grid-template-columns: auto;
        padding: 5% 2%;
        padding-bottom: 15%;
    }

    #About p{
        font-size: .9em;
        font-weight: bold;
    }

    #owners section{
        grid-template-columns: auto;
        padding: 5% 5%;
        grid-gap: 1%;
    }

    #owners div{
        background: white;
        box-shadow: 0 2px 10px grey;
        /* width: 45%; */
        margin: 2%;
    }

    #owners img{
        width: 100%;
        height: 400px;
    }

    #skills section{
        grid-template-columns: auto;
        padding: 5% 2%;
        padding-right: 15%;
    }

    div.one{
        width: 100%;
    }

    div.two{
        width: 100%;
        margin-left: 5%;
    }

    #resources section{
        background: white;
        grid-template-columns: auto auto;
    }

    article#WeKnow{
        background: rgb(214, 214, 214);
        display: grid;
        grid-template-columns: auto;
        grid-gap: 5%;
        padding: 5% 2%;
        width: 100%;
        margin: 5% 0;
    }

    #WeKnow div.one{
        /* height: 220px; */
        /* margin-bottom: 5%; */
        width: 100%;
    }

    #credits{
        grid-template-columns: auto auto;
        grid-gap: 8%;
    }

    .away{
        display: none;
    }

    #hideMenu{
        display: block;
        width: 8%;
        top: 0.5%;
    }

    button#learn{
        width: 100%;
    }


}




@media (max-width: 360px) and (min-width: 50px){
    button#learn{
        width: 100%;
    }

    #resources button#download{
        width: 100%;
    }

}