:root {
    --color-fondo: #ffffff36;
    --color-hover: #8080809c;
    --color-borde: black;
    --color-hover-borde: white;
    --sombra: 0 2px 4px black;
    --sombra-hover: 0 2px 4px white;
    --ancho-caja: 600px;
    --alto-caja: 150px;
    --tamanio-texto: 20px;
}

div#caja-variable {
    margin: auto;
    margin-top: 20px;
    width: var(--ancho-caja);
    height: var(--alto-caja);
    background-color: var(--color-fondo);
    border: 1px outset var(--color-borde);
    box-shadow: var(--sombra);
    font-size: var(--tamanio-texto);
    text-align: center;
    line-height: var(--alto-caja);
    transition: all 0.3s ease;
}

#caja-variable:hover {
    background-color: var(--color-hover);
    border: 1px outset var(--color-hover-borde);
    box-shadow: var(--sombra-hover);
}