@media screen and (max-width: 768px) {
    html {
        font-size: 80%;
    }

    .navbar ul {
        display: block;
        position: fixed;
        background: linear-gradient(0deg, rgba(255,220,220,0.7), rgba(255,220,230,0.6));
        backdrop-filter: blur(5px);
        height: 100vh;
        width: 230px;
        top: 0;
        right: -230px;
        transition: .5s linear;
    }

    .navbar i {
        display: inline-block;
        color: #000;
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    #times {
        margin: 1rem;
        border: 2px solid #000;
        border-radius: 50%;
    }

    #times:hover {
        color: #ff0000;
        border: 2px solid #ff0000;
    }

    .navbar ul li {
        margin: 3rem 2.5rem;
        text-align: justify;
    }

    .about .row {
        flex-wrap: wrap;
    }

    .menu .row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sponsor .row {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact .row {
        flex-wrap: wrap;
    }

    footer .social a {
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
    }

}

@media  screen and (max-width: 576px) {
    html {
        font-size: 71%;
    }

    .menu .row {
        grid-template-columns: repeat(1, 1fr);
    }

    .sponsor .row {
        grid-template-columns: repeat(1, 1fr);
    }

    .group-contact span {
        padding: 1rem;
    }
    
}