/**** 768, 600, 480, 320 ****/

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

    h1{
        margin-top: 6%;
    }

    h2 span{
    color: rgb(78, 54, 8);
    }
}





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

    section#entire{
        background-size: 100%;
        background-color: green;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
        position: relative;
    }

    #works{
        background-color: green;
        background-image: url(images/four.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
        padding-bottom: 7%
    }

    #contact{
        background-color: green;
        background-image: url(images/two.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
    }
    
    #works h2{
        font-size: 2.5em;
        color: white;
    }

    #works article{
        grid-template-columns: auto;
    }

    #works img{
        height: 400px;
    }
    
    #contact input{
        height: 60px;
        font-size: 2em;
        color: white;
        border-bottom: 4px solid white;
    }
    
    #contact button{
        width: 50%;
        height: 80px;
        font-size: 2em;
        color: white;
        background: green;
    }

    h1{
        margin-top: 6%;
        color: white;
        font-size: 10em;
    }

    h1 span{
        color: white;
    }

    h2{
        color: black;
    }

    h2 span{
    /* color: rgb(78, 54, 8); */
    color: black;
    }

    nav a{
        font-size: 2em;
    }

    #entire img{
        width: 70px;
        height: 70px;
    }


}



@media(max-device-width: 320px) and (min-device-width: 50px){
    body{
        background: white;
    }
    section#entire{
        background-size: 100%;
        background-color: green;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
        position: relative;
    }

    #works{
        background-color: green;
        background-image: url(images/four.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
        padding-bottom: 7%
    }

    #contact{
        background-color: green;
        background-image: url(images/two.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        width: 80%;
    }
    
    #works h2{
        font-size: 2.5em;
        color: white;
    }

    #works article{
        grid-template-columns: auto;
    }

    #works img{
        height: 400px;
    }
    
    #contact input{
        height: 80px;
        font-size: 3em;
        color: white;
        border-bottom: 4px solid white;
    }
    
    #contact button{
        width: 100%;
        height: 100px;
        font-size: 3em;
        color: white;
        background: green;
        margin-top: 5%;
    }

    h1{
        margin-top: 6%;
        color: white;
        font-size: 10em;
    }

    h1 span{
        color: white;
    }

    h2{
        color: black;
    }

    h2 span{
    /* color: rgb(78, 54, 8); */
    color: black;
    }

    nav a{
        font-size: 2em;
    }

    #entire img{
        width: 70px;
        height: 70px;
    }
}