/* Estilos generales del piano */
.keys-set {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    order: -1;
}

.keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    order: -1;
}

.black-keys {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7vw; /* Ajusta el espacio entre las teclas negras en vw según sea necesario */
    order: -1;
    margin-right: 2vw;
}

.white-keys {
    display: flex;
    gap: 0; /* No se ajusta el espacio entre las teclas blancas en vw */
}

.black-keys-first img {
    height: auto;
    margin-left: 2vw;
}

.black-keys-second img {
    height: auto;
    margin-left: 1vw;
}
.piano-instructions-title {
    color: #3333CB;
    font-family: "Abril Fatface";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 10%;
    margin-right: 10%;
}
.piano-instructions-text {
    color: #3333CB;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 10%;
    margin-right: 10%;
}
.keyboard {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Media Query para pantallas de hasta 500px */
@media screen and (max-width: 650px) {
   
    .keys {
        position: relative;
        width: 100vw; /* Hace que el conjunto de teclas ocupe el 100% del ancho de la pantalla */
    }

    .black-keys {
        gap: 7vh; /* Ajusta el espacio entre las teclas negras en vh según sea necesario */
    }

    .white-keys img {
        width: 10vw; /* Ajusta el ancho de las teclas blancas y negras al 10% del ancho de la pantalla */
        max-width: 10vw; /* Ajusta el ancho máximo en vw según sea necesario */
        height: auto; /* Mantiene la proporción de la altura */
    }

    .black-keys-first img {
        width: 8vw ;
        height: auto;
        margin-left: 1vw;
    }

    .black-keys-second img {
        width: 8vw ;
        height: auto;
        margin-left: 1vw;
    }
    .keyboard {
       width: 300px;
    }
    .piano-instructions-text {
        font-size: 10px;
    }
    
}