:root{
    --colorPrimario:#a5c882;
    --colorSecundario:#d33f49;
    --blanco:#fff;
    --negro:#000;
    --gris:#e7e7e7;
}



body{
  font-family: 'Lato',sans-serif;
  margin: 0;
  height: 100vh;
  background-color: var(--gris);  
}

*:first-letter {
    text-transform: capitalize;
}

.bordeRedondo{
    border-radius: 5px;
}

.lista{    /*darespacio_abarra_de_tareas_dealtura_de_toolbar_explorador **/
    margin: 25px auto;
    padding: 25px;
    background-color: var(--blanco);
    width: 100%;
    max-width: 350px;
}

.date{    /*darespacio_abarra_de_tareas_dealtura_de_toolbar_explorador **/
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fechaCorrecta{
    display: flex;
    align-items: center;
}

#fechaNumero{
    font-size: 50px;
}
#fechaTexto{
    letter-spacing: 3px;
    text-transform: uppercase;
}
#fechaTexto,
#fechaNumero,
#fechaMes{
    font-weight: bold;
}

#fechaMes,
#fechaAño{
    margin-left: 7px;
    font-size: 20px;
}

form{
    margin: 20px 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 35px auto;
    grid-column-gap:15px;
}

input{
    border: none;
    padding-left: 10px;
    background-color: var(--gris);
}

input:focus{
    outline:none;
}

.agregaTareaBoton
.ordenaBoton{
    border: none;
    font-weight: bold;
    cursor:pointer;
}
.agregaTareaBoton{
    height: 35px;
    border-radius: 50%;
    font-size: 18px;
    background-color: var(--gris);
}

.ordenaBoton{
    background-color: var(--colorSecundario);
    color: var(--blanco);   
}

.tarea{
    background-color: var(--colorPrimario);
    padding: 15px;
    margin-top: 15px;
    color: var(--blanco);
    cursor: pointer;
}

.confirmado{
    background-color: var(--gris);
    text-decoration: line-through;
    color: var(--negro);
}