@media screen and (max-width:822px) {

    header .container .menu a {
        margin: 5px;
    }

    header .container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width:702px) {

    header .container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width:602px) {
    
    header .container .menu {
        width: 500px;
    }

    header .container .menu a {
        display: block;
        max-width: 255px;
        margin: 5px auto;
        text-align: center;
    }
}

@media screen and (max-width:450px) {
    
    footer > .container {
        display: flex;
        justify-content: space-around;
        max-width: 300px;
    }

    footer .container .left, footer .container .right  {
        min-width: 200px;
    }

    footer .container .left p {
        text-align: justify;
        margin-bottom: 15px;
    }
}