html, body {
    width: 100%; /* Establece el ancho del elemento html y body al 100% del contenedor padre */
    height: 100%; /* Establece la altura del elemento html y body al 100% del contenedor padre */
    margin: 0; /* Elimina los márgenes predeterminados del navegador */
}

.wrapper {
    box-sizing: border-box; /* Incluye padding y borde en el ancho y alto del elemento *

    flex-direction: column; /* Alinea los elementos en una columna */
    width: 100%; /* Establece el ancho del contenedor al 100% del contenedor padre */
    height: 100%; /* Establece la altura del contenedor al 100% del contenedor padre */
}

#scene-container {
    width: 100%; /* Establece el ancho del contenedor de la escena al 100% del contenedor padre */
    margin-bottom: 25px; /* Añade un margen inferior de 25px al contenedor de la escena */
}

.flex-row {
    display: flex; /* Usa Flexbox para el diseño del contenedor */

    width: 100%; /* Establece el ancho del contenedor al 100% del contenedor padre */
    height: 20%; /* Establece la altura del contenedor al 50% del contenedor padre */
}

.item {
    display: flex; /* Usa Flexbox para el diseño del contenedor */

    width: 100%; /* Establece el ancho del elemento al 30% del contenedor padre */
    height: 30%; /* Establece la altura del elemento al 100% de su contenedor */
}

#blocklyArea {
    display: flex; /* Usa Flexbox para el diseño del contenedor */
    width: 100%; /* Establece el ancho del elemento al 30% del contenedor padre */
    height: 30%; /* Establece la altura del elemento al 100% de su contenedor */
}
#blocklyDiv {
    position: absolute; /* Posiciona el elemento de forma absoluta dentro de su contenedor */
}

.center {
    margin: 0 auto; /* Centra el elemento horizontalmente */
    text-align: center; /* Centra el texto dentro del elemento */
}

.button {
    background-color: darkmagenta; /* Establece el color de fondo del botón a magenta oscuro */
    color: white; /* Establece el color del texto del botón a blanco */
    font-style: italic; /* Aplica un estilo de fuente en cursiva al texto del botón */
    font-weight: 600; /* Establece el peso de la fuente a 600 (semi-negrita) */
    padding: 5px 10px; /* Aplica un relleno de 5px arriba y abajo, y 10px a la izquierda y derecha */
    border: none; /* Elimina cualquier borde alrededor del botón */
    border-radius: 2px; /* Redondea las esquinas del borde del botón */
    cursor: pointer; /* Cambia el cursor a una mano cuando se pasa por encima del botón */
}