html {
    font-family: sans-serif;
    font-size: 16px;
}

:root {
    --colorfondo: rgb(76, 235, 8);
}

/* Your CSS below here */

.box {
    /* Fondo */
    background-color: var(--colorfondo);
    background-image: linear-gradient(45deg, rgba(214, 115, 225, 0) 0%, rgba(214, 115, 225, 0.5) 30%, rgba(214, 115, 225, 0.8) 100%);

    /* Dimenciones y centrar contenido */
    inline-size: 200px;
    block-size: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
    /* El tamaño de fuente aumenta a 1.125 rem, calculado como 18px (16px * 1.125) */

    margin: 5em auto;
    /* Centrar la caja */

    /* Texto */
    color: rgb(51, 10, 118);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Agrega una sombra negra */

    /* Borde */
    border: 1px solid rgb(76, 235, 8);
    border-radius: 1.5em;

    /* Sombra Caja */
    /*     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 10px 10px 20px rgba(255, 255, 255, 0.3), inset -10px -10px 20px rgba(0, 0, 0, 0.3);
 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 4px 4px 5px rgba(255, 255, 255, 0.5), inset -4px -4px 5px rgba(0, 0, 0, 0.5);

}