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

    body{
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        background-color: #eee;
        background-image: url(imagenes/fondo.webp);
        background-repeat: no-repeat;
        background-size: cover;
        backdrop-filter: blur(10px);
    }
    
    h1, h2, h3 {
        font-family: "Playball", cursive;
        font-weight: 400;
        font-style: normal;
    }
    span{
        color: #59CADE;
    }
    
    @keyframes show {
        from{
            opacity: 0;
            scale:  25%;
        }
    
        to{
            opacity: 1;
            scale: 100%
        }
    }
    
    .imagen {
        view-timeline-name: --image;
        view-timeline-axis: block;
    
        animation-timeline: --image;
        animation-name: show;
    
        animation-range: entry 25% cover 30%;
        animation-fill-mode: both;
    }
    /*nav*/
    
    .nav__container {
        display: flex;  
        flex-wrap: wrap;
        height: 180px;
        width: 100%;
        background-color: #fff;
        opacity: 90%;
        border-bottom: 1px solid #bbb;
        justify-content: space-between;
        position: sticky;
        align-items: center;
        z-index: 200;
        top: 0;
    }
    .nav__logo{
        padding-left: 30px;
        object-fit: contain;
        height: 180px;
    }
    .nav__ul{
        align-items: baseline;
        flex-grow: 1;
        background-color: #cbf9ff;
        position: absolute;
        width: 100%;
        top: 180px;
        display: flex;
        height: 0;
        overflow: hidden;
        flex-direction: column;
        gap: 3rem;
        transition: all 0.3s;
    }
    .nav__ul-li {
        list-style: none;
        margin: 0px 20px;
        font-size: 3.5rem;
        padding: 5px 12px;
        font-weight: bold;
    }
    
    .nav__li-a{
        text-decoration: none;
        color: #222F30;
    }
    .nav__li-a:hover{
        transition: 1s;
        color: #33CCCC;
    }
    
    .check-box{ 
        display: none;
    }
    
    .barras{
        padding-right: 30px;
        cursor: pointer;
    }
    
    .check-box:checked + .nav__ul{
        height: calc(100vh - 180px);
    
    }
}

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

    body{
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
        background-color: #eee;
        background-image: url(imagenes/fondo.webp);
        background-repeat: no-repeat;
        background-size: cover;
        backdrop-filter: blur(10px);
    }
    
    h1, h2, h3 {
        font-family: "Playball", cursive;
        font-weight: 400;
        font-style: normal;
    }
    span{
        color: #59CADE;
    }
    
    @keyframes show {
        from{
            opacity: 0;
            scale:  25%;
        }
    
        to{
            opacity: 1;
            scale: 100%
        }
    }
    
    .imagen {
        view-timeline-name: --image;
        view-timeline-axis: block;
    
        animation-timeline: --image;
        animation-name: show;
    
        animation-range: entry 25% cover 30%;
        animation-fill-mode: both;
    }
    /*nav*/
    
    
    .nav__container {
        display: flex;  
        height: 140px;
        width: 100%;
        background-color: #fff;
        opacity: 90%;
        border-bottom: 1px solid #bbb;
        justify-content: space-between;
        position: sticky;
        padding-top: 24px ;
        align-items: center;
        z-index: 200;
        top: 0;
    }
    .nav__logo{
        flex-grow: 2;
        object-fit: contain;
        height: 180px;
        padding-bottom: 10px;
    }
    
    .nav__ul{
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
    .nav__ul-li {
        list-style: none;
        margin: 0px 20px;
        font-size: 20px;
        padding: 10px 6px;
    }
    
    .nav__li-a{
        text-decoration: none;
        color: #222F30;
    }
    .nav__li-a:hover{
        transition: 1s;
        color: #33CCCC;
    }
    .check-box{ 
        display: none;
    }
    .barras{
        display: none;
    }
}