:root {
    --color-caja-titulo: #D59B26;
    --color-bg: #FFFCB7;
}

* {
    margin: 0px;
    padding: 0px;
}

#contenedor {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#caja {
    background-color: rgb(253, 253, 253);
    text-align: center;
    border-radius: 10px;
    width: auto;
    box-shadow: 5px 10px 20px rgb(187, 179, 179) inset;
}

#caja2 {
    margin-top: 10px;
    padding: 10px 0px 10px 0px;
    width: auto;
    background-color: #D59B26;
    text-align: center;
    font-size: 4vh;
}

#titulo {

    color: black;
    font-size: 5vh;
    width: 100%;
    background-color: var(--color-caja-titulo);
}

h2 {
    padding-top: 30px;
    font-size: 5vh;
}

#usuario,
#password {
    background-color: rgb(178, 143, 14);
    border-radius: 5px;
    border: 0;
    height: 5vh;
    width: 50vh;
    color: black;
    text-align: center;
    cursor: text;
}

#boton {
    border-radius: 6px;
    text-align: center;
    padding-bottom: 30px;
    font-size: 5vh;
}

#clic {
    margin-top: 10%;
    border: 0;
    height: auto;
    font-size: 5vh;
    width: auto;
    border-radius: 12px;
    background-color: rgb(178, 143, 14);
    color: black
}

#clic:hover {
    background-color: black;
    color: white;
    border: 20;
    border: 1px solid #B97F0A;
    cursor: pointer;
}

body.light-theme {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    background-color: var(--color-bg);
}

/*CAMBIAR A NOCHE*/

body.dark-theme {
    --color-bg: #33FFE3;
    --color-caja-titulo: rgb(47, 79, 79);
}