@charset "UTF-8";

@media only screen and (max-width: 1980px){
    
    body{
        width: 95%;
        margin-top: 2%;
        margin-left: 2.5%;
        margin-right: 0;
        background-color: rgba(0, 0, 0, 0.918);
    }

    html{
        background-color: #E7B8B0;
    }

    .menu-img{
        margin-top: 2rem;
        margin-left: 2rem;
    }
    
    .menu-img img{
        width: 120px;
    }

    .div-links nav{
        gap: 2rem;
    }

    .div-links a{
        font-size: 16px;
    }
    .links-img1{
        width: 30px;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .links-img2{
        width: 120px;
        margin-right: 3rem;
    }

    .menu-section{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0rem;
        margin-left: 0rem;
        margin-right: 0rem;
        max-width: 100%;
        height: 6rem;
    }

    .img-free{
        width: 130px;
        position: absolute;
        top: 0;
        right: 0;
    }

    hr{
        display: none;
    }

    .container-section{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .container-section p{
        font-size: 35px;
        margin-left: 0;
    }

    .img-watch{
        margin-top: 0rem;
        margin-right: 0rem;
        margin-bottom: 2rem;
    }
    
    .img-watch img{
        width:230px;
    }

    .boxes-container{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .boxes-final{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}

@media only screen and (max-width: 768px){
    
    body{
        width: 95%;
        margin-top: 2%;
        margin-left: 2.5%;
        margin-right: 0;
        background-color: rgba(0, 0, 0, 0.918);
    }

    html{
        background-color: #E7B8B0;
    }

    .menu-img{
        margin-top: 2rem;
        margin-left: 2rem;
    }
    
    .menu-img img{
        width: 70px;
    }

    .div-links nav{
        gap: 2rem;
    }

    .div-links a{
        font-size: 12px;
    }
    .links-img1{
        width: 30px;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .links-img2{
        width: 70px;
        margin-right: 3rem;
    }

    .menu-section{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0rem;
        margin-left: 0rem;
        margin-right: 0rem;
        max-width: 100%;
        height: 6rem;
    }

    .img-free{
        width: 85px;
        position: absolute;
        top: 0;
        right: 0;
    }

    hr{
        display: none;
    }

    .container-section{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .container-section p{
        font-size: 35px;
        margin-left: 0;
    }

    .img-watch{
        margin-top: 0rem;
        margin-right: 0rem;
        margin-bottom: 2rem;
    }
    
    .img-watch img{
        width:230px;
    }

    .boxes-container{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .boxes-final{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}
@media only screen and (max-width: 700px){
    .menu-section{
        justify-content: center;
    }
    nav a{
        display: none;
    }
    .links-img1{
        margin-left: 4rem;
    }
    .container-section p{
        font-size: 25px;
    }
    .box-div{
        width: 80%;
    }
    .boxes-final img{
        width: 100%;
    }
}