:root {
    --color-oscuro: black;
    --color-fondo: #ededed;
    --color-claro: white;
    --color--hoverNav: rgb(219, 24, 24);
}

*::after,
::before {
    box-sizing: border-box;
}

* {
    /* border: 1px solid; */
}

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0 3rem;
    min-height: 100vh;
    background-color: var(--color-fondo);
    color: var(--color-oscuro);
}


/* 
########################  
header
########################
*/

.header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin-top: 2em;
}

.nav {
    display: flex;
    gap: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
}

.nav__btn {
    text-decoration: none;
    color: var(--color-oscuro);
}

.nav__btn:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 6px;
    background-color: var(--color--hoverNav);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.nav__btn--active::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 6px;
    background-color: var(--color-oscuro);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.darkMode {
    text-align: right;
}

#darkMode {
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: var(--color-oscuro);
}

.container__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn {
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--color-oscuro);
    background-color: var(--color-fondo);
    color: var(--color-oscuro);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.btn:active {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}


/* 
########################  
        container
########################
*/

.container {
    margin-bottom: 2em;
}

.calendario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border-top: 1px solid var(--color-oscuro);
    border-left: 1px solid var(--color-oscuro);
}

.calendario__celda {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1em;
    border-right: 1px solid var(--color-oscuro);
    border-bottom: 1px solid var(--color-oscuro);
}

.calendario__celda:hover {
    cursor: pointer;
    background-color: var(--color-oscuro);
    color: var(--color-claro);
}

.active-day {
    background-color: var(--color-oscuro);
    color: var(--color-claro);
}