html {
    font-family: 'Monserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;

}

img {
    width: 100%;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: MiFuente;
    src: url(../font/lmmonoproplt10-regular-webfont.woff2) format('woff2'),
         url(../font/lmmonoproplt10-regular-webfont.woff) format('woff'),
         url(../font/lmmonoproplt10-regular.otf);
    font-weight: normal;
    font-style: normal;
}


@media all and (min-width: 320px) {

    #abrir,
    #cerrar {
        padding: 0.3rem;
        width: 4rem;
    }

    #cerrar {
        display: none;
        width: 3.5rem;
        padding: 0.8rem;
    }

    #contenedor-link {
        height: 0;
        overflow: hidden;
        width: 100%;
        background-color: #303030;
        transition: height 1s ease;
    }

    #contenedormenu:target #abrir {
        display: none;
    }

    #contenedormenu:target #cerrar {
        display: block;
    }

    #contenedormenu:target #contenedor-link {
        height: 40vh;
        overflow: auto;
    }

    #contenedormenu {
        background-color: #303030;
    }

    nav ul li a {
        display: block;
        width: 100%;
        margin-top: 1rem;
        padding: 1.5rem;
        text-align: center;
        background-color: rgb(18, 18, 18);
        color: whitesmoke;
        text-decoration: none;
        font-family: 'Monserrat', sans-serif;
    }

    #video-inicio {
        width: 100%;
        position: absolute;
        top: 68px;
        transition: margin-top 1s ease;
    }

    #sobrevideo {
        position: absolute;
        transition: margin-top 1s ease;
        width: 100%;
        height: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #sobrevideo h1 {
        color: white;

    }

    #sobrevideo a {
        color: whitesmoke;
        background-color: rgb(145, 71, 255);
        padding: 0.5rem;
        border-radius: 1rem;
        margin-top: 1.5rem;
    }

    #sobrevideo h1{
        margin-bottom: 0.5rem;
        font-size: 2rem;
    }
    #contenedor-botonvideo{
        margin-left: 1rem;
    }


    #titulo-bad-on{
        font-family: 'Koulen', cursive;
        text-align: center;
        font-size: 3rem;
    }

    #bio{
        margin-bottom: 1rem;
        font-family: MiFuente !important;
        text-align: center;
        padding: 0.5rem;
        font-size: 1.5rem;
    }

    #sobrevideo a:hover, #sobrevideo a:focus{
        background-color: rgb(185, 139, 255);
    }

    article{
        display: flex;
        flex-direction: column;
    }

    #contenedormenu:target video{
        margin-top: 39vh;
    }

    #logo{
        margin-top: 30vh;
    }

    #estadio{
        padding: 0.5rem;
        font-size: 1.5rem;
    }

    #contenedor-estadio{
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: #303030;
        color: whitesmoke;
        text-align: center;
    }

    footer{
        height: 15vh;
        background-color: rgb(145, 71, 255);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;

    }

    footer a{
        color: white;
        padding: 0.5rem;
    }


    footer a:hover{
        color: #303030;
    }

    #contenedor-estadio figcaption{
        background-color: #4f4f4f;
        padding: 0.3rem;
    }

    iframe{
        margin-top: 0.3rem;
        height: 20vh;
        width: 100%;
    }

    .tarjeta-video{
        background-color: #303030;
        width: 95vw;
        margin-top: 2rem;
        border-radius: 1rem;
        color: white;
        padding: 1.5rem;
        overflow: hidden;
    }




    #contenedor-videos{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 2rem;
    }


    #body-top5{
        background: linear-gradient(to bottom,rgb(145, 71, 255) ,rgb(93, 11, 215) );
    }

    #main-top{
    padding: 0.5rem;
    }

    #titulo-top{
        color: whitesmoke;
        font-size: 2rem;
    }
    
    #contenedor-canciones{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #cancion-n1{
        padding: 1rem;
        border: 0.3rem solid  rgb(234, 190, 63);
        border-radius: 1rem;
        margin-top: 2rem;
        width: 95%;
    }

    .titulo-cancion{
        font-size: 1.5rem;
        color: whitesmoke;
        margin: 0.5rem;
    }
    #numero1{
        color: rgb(234, 190, 63);
    }

    #cancion-n2{
        margin-top: 2rem;
        padding: 1rem;
        border: 0.3rem solid  	#C0C0C0;
        border-radius: 1rem;
        width: 90%;
    }

    #numero2{
        color: 	#C0C0C0;
    }

    #cancion-n3{
        margin-top: 2rem;
        border: 0.3rem solid #CD7F32;
        border-radius: 1rem;
        padding: 1rem;
        width: 85%;
    }

    #numero3{
        color: #CD7F32;
    }

    .tarjeta-cancion{
        margin-top: 2rem;
        padding: 1rem;
        border: 0.3rem solid whitesmoke;
        border-radius: 1rem;
        width: 80%;
    }

    .tarjeta-cancion strong, .tarjeta-cancion p{
        color: whitesmoke;
    }

    audio{
        width: 100%;
    }

    #titulo-top{
        font-size: 3rem;
    }

    #footer-top5{
        background-color: transparent;
    }

}

@media all and (min-width: 520px){


    #logo{
        margin-top: 40vh;
    }

    #sobrevideo{
        font-size: 1.2rem;
    }

    iframe{
        height: 25vh;
    }

}

@media all and (min-width: 720px){


    #logo{
        margin-top: 60vh;
    }

    #sobrevideo{
        height: 30vh;
    }

    #sobrevideo h1{
        font-size: 4rem;
    }

    iframe{
        height: 30vh;
    }

    #titulo-top{
        font-size: 6rem;
    }
}

@media all and (min-width: 920px){

    #abrir,
    #cerrar {
        display: none;
    }

    #contenedor-link{
        height: 69px;
        display: flex;
        flex-direction: row;
        list-style: none;
        justify-content: center;
    }

    #contenedor-link a{
        background-color: transparent;
        margin: 0;
        height: 100%;
        margin-right: 2rem;
    }

    #contenedor-link a:hover{
        color: rgb(185, 139, 255);
        border-bottom: 0.3rem solid rgb(185, 139, 255);
    }

    #logo{
        margin-top: 80vh;
    }

    #sobrevideo{
        height: 60vh;
    }

    #sobrevideo h1{
        font-size: 5rem;
    }

    #sobrevideo a{
        font-size: 2rem;
    }

    #contenedor-estadio{
        display: flex;
        flex-direction: row;
        text-align: left;

    }

    #contenedor-estadio figure{
        min-width: 40vw;
        padding-left: 1rem;
        text-align: center;
    }

    iframe{
        height: 50vh;
    }


    #contenedor-canciones{
        max-width: 80vw;
        margin: 0 auto;
    }

    #titulo-top{
        font-size: 8rem;
        text-align: center;
    }
}

@media all and (min-width: 1200px){


    #logo{
        margin-top: 115vh;
    }

    #sobrevideo{
        height: 75vh;
    }

    #sobrevideo h1{
        font-size: 10rem;
    }

    #sobrevideo a{
        font-size: 4rem;
    }

    iframe{
        height: 75vh;
    }

    #contenedor-canciones{
        max-width: 45vw;
        margin: 0 auto;
    }
}