@media screen and (min-width:320px) {


    .footer{
        width: 100%;
        height: auto;
    }

    .container{
        max-width: 100%;
    }

    .container ul{
        width: 80%;
        list-style-type: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 50px auto;
    }

    .container li{
        display: block;
        text-decoration: none;
        height: 4rem;
        width: 4rem;
        line-height: 4.3rem;
        font-size: 0.70em;
        background-color: #002c58;
        transition: background-color 0.15s ease-in-out;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        text-align: center;
    }
    .container a{
        text-decoration: none;
        color: #f1f1f1;
    }

    .container a:hover{
        opacity: 0.5;
        cursor: pointer;
    }


    .container p{
     text-align: center;
     margin: 25px;
    }

    /*------------Arrow Up---------------*/

    .arrow-up{
        opacity: 1;
        display: block;
        position: fixed;
        bottom: 20px;
        left: 20px;
        background-color: #989c9f;
        padding: 15px;
        color: #f1f1f1;
        border-radius: 5px;
    }   
}