@media screen and (max-width: 999px){
    /* start of large tablet styles */
    header, nav, article, footer {
        width: 768px;
    }
}

@media screen and (max-width: 767px){
    /* start of tablet styles */
    header, article, footer {
        width: 480px;
    }

    nav{
        display: none;
    }
}   

@media screen and (max-width: 479px){
    /* start of phone styles */
    header, nav, article, footer {
        width: 100%;
    }
}