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

    .aside{
        display: none;
        border: 0;
    }

    .one,.two,.three{
        background-color: white;
        margin: 7px auto;
        width: 100%;
        height: 5px;
        transition-duration: 0.3s;
    }

    .toggle{
        width: 40px;
        height: 30px;
        margin-right: 3rem;
    }

    .menu.on{
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to left,rgb(22, 18, 18),brown);
        z-index: 10;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu.on nav{
        display: block;
    }

    .menu.on .toggle{
        position: absolute;
        top: 24px;
        right: 20px;
    }

    .menu.on .toggle .one{ transform: rotate(45deg) translate(7px,7px);}
    .menu.on .toggle .two{opacity: 0;}
    .menu.on .toggle .three {transform: rotate(-45deg) translate(8px,-11px);}

    .menu.on nav{
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .menu.on nav a{
        transition-duration: 0.3s;
        font-size: 4rem;
        line-height: 8rem;
    }

    main{
        margin-top: 8rem;
        background-position: center;
        display: flex;
        flex-direction: column;
    }
    main2{
        background-position: center;
        display: flex;
        flex-direction: column;
    }
    .main-container{
        align-items: center;
        margin-top: 6rem;
    }
    .main2-container{
        align-items: center;
        margin-top: 6rem;
    }
    
    #retro{
        width: 120%;
        height: 120%;
    }
    
    #free{
        align-items: center;
        width: 80%;
        height: 20%;
    }

    .nav_inf{
        width: 90vw;
        height: 60vh;
        margin-top: 0;
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;
        align-items: center;
    }
    .subtitle{
        margin-top: 3rem;
    }
}

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

    .info{
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;
    }

    footer{
        margin: 0 auto;
        width: 100%;
        background-color: black;
        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .nav_inf{
        height: 115vh;
        margin-top: 5rem;
        color:white;
        flex-direction: column;
        justify-content: start;
        align-items: initial;
    }
    .main-container{
        width: 70vh;
    }
    .main2-container{
        width: 70vh;
    }
    
}