/* 768 media */
@media(max-width:768px){
    body{
        margin: 0px 70px 0px 70px;
    }
}

/* 550px media */
@media (max-width: 550px) {
    body {
        margin: 0px 15px 0px 15px;
    }

    nav {
        padding: 0 10px;
    }

    li {
        font-size: small;
        padding: 5px;
    }
}

/* 425px media */
@media (max-width:425px) {
    body{
        margin: 35px 35px;
    }

    .main-content{
        flex-direction: column;
        margin-top: 50px;
    }

    .content{
        width: 335px;
        font-size: smaller;
    }

    footer {
        font-size: medium;
        flex-direction: column;
    }

    footer div {
        margin-bottom: 10px;
    }
}

/* 375px media */
@media (max-width:375px) {

    .content{
        width:250px;
    }
}