@media screen and (max-width:750px) {
    .navbar{
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 20px;

    }
    .rayitas{
        display: block;
    }

    .nav-links{
        position: fixed;
        width: 100%;
        height: 15vh;
        background-color: rgb(255, 146, 255);
        top: 80px;
        left: -100%;
        text-align: center;
    }

    .nav-links{
        display: block;
        margin: 50px 0;
        line-height: 35px;
    }

    .nav-links a{
        font-size: 25px;
    }

    #check:checked~ul{
        left: 0;
    }
    
    .hero h2{
        font-size: 2rem;
    }
}