#layout-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 1em;
}

#layout-wrapper::after,
#layout-wrapper::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 29em;
    background: var(--color-morado);
    z-index: 1;
}
#layout-wrapper::before{
    height: -webkit-fill-available;
    background: var(--color-rojo);
}

    /* <!-- acceso --> */
    .contenedor_acceso{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
        .contenedor_acceso a {
            text-decoration: none;  
            padding: 0.25em;
            margin-left: 0.5em;
            border-radius: 0.5em;
            
        }
        .contenedor_acceso a:hover {  
            background: black;
        }

        .contenedor_acceso a:nth-child(1) label {
            color: var(--color-rojo);
            font-size: .8em;
        }
        .contenedor_acceso a:nth-child(2) label{
            color: var(--color-verde);
            font-size: .8em;
        }
    /* <!-- header --> */
    .contenedor_header{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
        .contenedor_header img{
            width: 17em;
        }
        .contenedor_header label{
            color: var(--color-amarillo);
            text-align: end;
        }
        .contenedor_opcion{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }
            .contenedor_opcion label {
                padding: .5em 2em;
                background-color: black;
                margin: .25em;
                cursor: pointer;
                border-radius: .5em;
                box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
            }
            
            .contenedor_opcion label:hover{
                background-color: rgb(30, 30, 30);
            }
    /* <!-- contenedor piano --> */
    .contenedor_piano {
        overflow-x: auto;
        overflow-y: hidden;
        width: calc(100% - 4em);
        margin: 2em 0;
    }
        .piano{
            margin: auto;
            width: 45em;
            height: 30em;
            display: flex;
            justify-content: center;
            transform: scale(1.19);
        }
            .piano img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .contedor_opcion{    
                position: absolute;
                width: 34em;
                margin-left: 3.6em;
                margin-bottom: 3.5em;
                height: 7em;
                z-index: 2;
                bottom: 0;
                display: flex;
            }
            .boton_sonido{
                position: absolute;
                width: 1.7em;
                height: 1.7em;
                right: 0;
                margin-right: -2.15em;
                margin-top: 1.15em;
                cursor: pointer;
            }

            .boton_sonido img{
                object-fit: cover;
            }

            .sonido_off{
                display: flex;
            }

            .sonido_on{
                display: none;
            }

            .boton_piano{
                width: 1.4em;
                height: 7em;
                margin-right: 2px;
                cursor: pointer;
                transition: background-color .4;
            }

            .boton_piano:hover {
                background-color: rgba(0, 0, 0, .2);
                /* box-shadow: 0 0 1em 1em rgba(0, 0, 0, .3); */
            }

            .boton_piano:nth-child(2):hover,
            .boton_piano:nth-child(4):hover,
            .boton_piano:nth-child(7):hover,
            .boton_piano:nth-child(9):hover,
            .boton_piano:nth-child(11):hover,
            .boton_piano:nth-child(14):hover,
            .boton_piano:nth-child(16):hover,
            .boton_piano:nth-child(19):hover,
            .boton_piano:nth-child(21):hover,
            .boton_piano:nth-child(23):hover,
            .boton_piano:nth-child(26):hover,
            .boton_piano:nth-child(28):hover,
            .boton_piano:nth-child(31):hover,
            .boton_piano:nth-child(33):hover,
            .boton_piano:nth-child(35):hover {
                background-color: rgba(255, 255, 255, .2);
                /* box-shadow: 0 0 1em 1em rgba(0, 0, 0, .3); */
            }

            .boton_piano:nth-child(2) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: 0.7em;
            }

            .boton_piano:nth-child(4) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.65em * 4);
            }
            .boton_piano:nth-child(7) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 8);
            }
            .boton_piano:nth-child(9) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 11);
            }
            .boton_piano:nth-child(11) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.66em * 14);
            }
            .boton_piano:nth-child(14) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 18);
            }
            .boton_piano:nth-child(16) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 21);
            }
            .boton_piano:nth-child(19) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 25);
            }
            .boton_piano:nth-child(21) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 28);
            }
            .boton_piano:nth-child(23) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 31);
            }
            .boton_piano:nth-child(26) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 35);
            }
            .boton_piano:nth-child(28) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 38);
            }
            .boton_piano:nth-child(31) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 42);
            }
            .boton_piano:nth-child(33) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 45);
            }
            .boton_piano:nth-child(35) {
                position: absolute;
                width: 1.3em;
                height: 5em;
                margin-left: calc(0.67em * 48);
            }
            
            .boton_piano:nth-child(6),
            .boton_piano:nth-child(13) ,
            .boton_piano:nth-child(18),
            .boton_piano:nth-child(25),
            .boton_piano:nth-child(30){
                margin-left: 6px;
            }
    /* <!-- contenedor inicio sesion --> */
    .contenedor_inicio_sesion {
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .contenedor_texto {
            display: flex;
            flex-direction: column;
            align-items: end;
        }
            .contenedor_texto label:nth-child(1){
                font-weight: 700;
                color: var(--color-amarillo);
            }
            .contenedor_texto label:nth-child(2){
                font-weight: 700;
                color: white;
                text-align: end;
            }

        .contenedor_acceso_centro {
            display: flex;
            padding: .5em;
        }
            .contenedor_input {
                display: flex;
                flex-direction: column;
                width: 100%;
                min-width: 15em;

            }
                .contenedor_input input{
                    border: none;
                    margin: .25em;
                    padding: .25em .75em;
                    border-radius: 0.3em;
                    box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
                }
                .contenedor_input input{

                }
            .boton {
                font-weight: 700;
                padding: 1em .5em;
                color: white !important;
                background-color: var(--color-verde);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: .5em;
                cursor: pointer;
                margin: 0.15em 0.1em;
                box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
            }
            .boton:hover {
                background-color: #5F9A8B;
            }
    /* <!-- contenedor prefooter --> */
    .contenedor_pre_footer{
        margin-top: 3em;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
        .contenedor_pre_footer img {
            width: 25em;
        }
        .contenedor_pre_footer label{
            color: var(--color-verde);
            font-size: 2em;
            font-weight: 700;
            text-align: end;
            margin: 1em;
        }
    /* <!-- contenedor prefooter --> */
    .contenedor_footer {
        width: 100%;
        border-top: 5px solid white;
        position: relative;
        width: 100%;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: .5em 0 0 0 ;
    }
        .contenedor_footer img{
            width: 8em;
            margin: .5em;
        }
        .contenedor_footer img:nth-child(1){
            border: 5px solid white;
            border-radius: 1em;
        }

@media only screen and (max-width: 908px) {
    .piano {
        transform: none !important;
    }
}
        
@media only screen and (max-width: 600px) {
    .contenedor_inicio_sesion {
        flex-direction: column;
    }
    .contenedor_inicio_sesion .contenedor_texto{
        width: 100%;
        align-items: start;
    }
    .contenedor_inicio_sesion .contenedor_texto br{
        display: none;
    }
    .contenedor_texto label:nth-child(2){
        text-align: start !important;
    }
    .contenedor_acceso_centro{
        width: 100%;
    }
}
@media only screen and (max-width: 575px) {
    .contenedor_acceso {
        flex-direction: column;
        align-items: end;
        justify-content: center;
    }
    .contenedor_header img{
        margin-bottom: 1em;
    }
    .contenedor_header label{
        width: 100%;
        text-align: left;
    }
    .contenedor_opcion{
        margin-top: 1em;
        width: 100%;
        text-align: center;
    }
    .contenedor_opcion label{
        text-align: center !important;
    }
    .contenedor_pre_footer label{
        text-align: center !important;
    }
}

  
@media only screen and (max-width: 450px) {
    .contenedor_acceso_centro{    
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .contenedor_input {
        margin: 1em 0;
    }
    .contenedor_acceso_centro .boton {
        padding: 0.5em;
    }
}