html, body {
    header {
        color: black;
        background-color: bisque;
        position: absolute;
        top: 5vh;
        left: 0%;
        width: 100vw;
        height: 15vh;
        text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: large;
    }

    nav {
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        color: black;
        background-color: lightcoral;
        position:fixed;
        top: 00vh;
        left: 0vw;
        width: 100vw;
        height: 5vh;
        display: flex;
        justify-content: space-around;
        z-index: 1;
    }

    main {
        color: black;
        background-color: beige;
        background-image: url("../img/backgroundpavement.jpg");
        background-size: contain;
        background-repeat: repeat;
        position: absolute;
        top: 20vh;
        left: 0vw;
    }

    .sections {
        color: black;
        background-color: rgba(245, 245, 220, 0.7);
        font-family:Arial, Helvetica, sans-serif;
        position: sticky;
        text-align: center;
    }

    .articles {
        padding: 20px;
        border: 10px;
        text-align:center;
    }

    .titulos {
        text-align:center;
        margin: 15px;
    }

    #yomicara {
        width: 496.4px;
        height: 483.4px;
    }

    #renystimpy {
        width: 406px;
        height: 304px;
    }

    .imgMinecraft {
        width: 480px;
        height: 270px;
    }

    .imgAcoso {
        width: 540px;
        height: 227px;
    }

    .imgTercero {
        width: 400px;
        height: 400px;
    }

    #imgTercero1 {
        width: 600px;
        height: 400px;
    }

    #imgTercero2 {
        width: 666px;
        height: 400px;
    }

    #imgCuarto1 {
        width: 670px;
        height: 420,5px;
    }

    #imgCuarto2 {
        width: 340.5px;
        height: 420.5px;
    }

    .imgCuarto {
        width: 570px;
        height: 320.5px;
    }

    #imgQuinto1 {
        width: 300px;
        height: 400px;
    }

    #imgQuinto2 {
        width: 533px;
        height: 400px;
    }

    #imgQuinto3 {
        width: 520px;
        height: 390px;
    }

    .imgSexto1 {
        width: 533px; 
        height: 300px;
    }

    .imgSexto2 {
        width: 401px; 
        height: 533px;
    }

    #imgFuturo {
        width: 800px; 
        height: 600px;
    }

    .imgMusica {
        width: 250px;
        height: 250px;
    }

    #imgGGM {
        width: 177px; 
        height: 313px;
    }

    #imgLorca {
        width: 192px; 
        height: 313px;
    }

    #imgChart {
        width: 1300px;
        height: 520px;
    }

    .imgGustos {
        width: 213px; 
        height: 313px;
    }

    #imgPossession {
        width: 200.6px; 
        height: 313px;
    }

    #imgTwinPeaks {
        width: 241.8px; 
        height: 313px;
    }

    #imgBocchi {
        width: 226.6px; 
        height: 313px;
    }

    #botonVolver {
        position:sticky;
        bottom: 5%;
        left: 90%;
        font-family: Arial, Helvetica, sans-serif;
        background-color:violet;
    }
}

@media screen and (max-width: 550px) {
    html, body {
        header {
            color: black;
            background-color: bisque;
            position: absolute;
            top: 5vh;
            left: 0%;
            width: 100vw;
            height: 15vh;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: large;
        }
    
        nav {
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            color: black;
            background-color: lightcoral;
            position:fixed;
            top: 00vh;
            left: 0vw;
            width: 100vw;
            height: 5vh;
            display: flex;
            justify-content: space-around;
            z-index: 1;
        }
    
        main {
            color: black;
            background-color: beige;
            background-image: url("../img/backgroundpavement.jpg");
            background-size: contain;
            background-repeat: repeat;
            position: absolute;
            top: 20vh;
            left: 0vw;
        }
    
        .sections {
            color: black;
            background-color: rgba(245, 245, 220, 0.7);
            font-family:Arial, Helvetica, sans-serif;
            position: sticky;
        }
    
        .articles {
            padding: 20px;
            border: 10px;
        }
    
        .titulos {
            margin: 15px;
        }
    
        #yomicara {
            width: 248.2px;
            height: 241.7px;
        }
        
        #renystimpy {
            width: 203px;
            height: 152px;
    }
    
        .imgMinecraft {
            width: 240px;
            height: 135px;
        }
    
        .imgAcoso {
            width: 270px;
            height: 113.5px;
        }
    
        .imgTercero {
            width: 200px;
            height: 200px;
        }
    
        #imgTercero1 {
            width: 300px;
            height: 200px;
        }
    
        #imgTercero2 {
            width: 333px;
            height: 200px;
        }
    
        #imgCuarto1 {
            width: 335px;
            height: 210.25px;
        }
    
        #imgCuarto2 {
            width: 170.25px;
            height: 210.25px;
        }
    
        .imgCuarto {
            width: 285px;
            height: 160.25px;
        }
    
        #imgQuinto1 {
            width: 150px;
            height: 200px;
        }
    
        #imgQuinto2 {
            width: 266.5px;
            height: 200px;
        }
    
        #imgQuinto3 {
            width: 260px;
            height: 195px;
        }
    
        .imgSexto1 {
            width: 266.5px; 
            height: 150px;
        }
    
        .imgSexto2 {
            width: 200.5px; 
            height: 266.5px;
        }
    
        #imgFuturo {
            width: 400px; 
            height: 300px;
        }

        .imgMusica {
            width: 125px;
            height: 125px;
        }

        #imgGGM {
            width: 88.5px; 
            height: 156.5px;
        }
    
        #imgLorca {
            width: 96px; 
            height: 156.5px;
        }
    
        .imgGustos {
            width: 106.5px; 
            height: 156.5px;
        }
    
        #imgPossession {
            width: 100.3px; 
            height: 156.5px;
        }
    
        #imgTwinPeaks {
            width: 120.9px; 
            height: 156.5px;
        }
    
        #imgBocchi {
            width: 113.3px; 
            height: 156.5px;
        }
    
        #botonVolver {
            position:sticky;
            bottom: 5%;
            left: 90%;
            font-family: Arial, Helvetica, sans-serif;
            background-color:violet;
        }
    }
}