* {
    margin: 0;
    padding: 0;
    font-family: 'menlo';
    font-weight: lighter;
}

body {
    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
    height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    margin-top: 25px;
    width: 150px;
}

legend {
    text-align: center;
    background-color: rgb(255, 30, 30);
    width: 100px;
    border-radius: 10px 5px 10px 5px;
    letter-spacing: 2px;
    user-select: none;
}

fieldset {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    border-radius: 10px 5px 10px 5px;
    background-color: white;
}

select {
    margin: 10px;
    border: 0px solid black;
    box-shadow: #f69d3c 0px 0px 5px;
    text-align: center;
    letter-spacing: 0.25px;
}

/* CALENDARIO */
#container-calendario {
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 950px) {
    #container-calendario {
        grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    }
}
@media (max-width: 650px) {
    #container-calendario {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
}
@media (max-width: 420px) {
    #container-calendario {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }
}
.mes {
    background-color: white;
    padding: 5px;
    border: 1px solid black;
    border-radius: 10px 5px 10px 5px;
}
.mes:hover {
    box-shadow: black 0 0 5px;
}

caption {
    background-color: rgb(255, 30, 30);
    border-radius: 10px 5px 10px 5px;
    text-transform: capitalize;
    padding: 2px 0 2px 0;
    letter-spacing: 2px;
    user-select: none;
}

thead {
    user-select: none;
}

td {
    text-align: center;
    padding: 1px;
    border-radius: 5px;
}
td:hover {
    outline: 1px solid black;
    background-color: rgba(0, 157, 255, 0.125);
    cursor: pointer;
    text-shadow: #503020 0 0 1px;
}