main.css

body {
    width: 80%;
    margin: auto;
    font-size: 0.9rem;
    font-family: sans-serif;
}

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
}

table {
    border-collapse: collapse;
}

td {
    /* border: 1px solid black; */
    background-color: #fff;
    height: 40px;
    width: 50px;
    text-align: center;
}

button {
    border: 0px;
    background-color: #e6e6e6
}

#next,
#previous {
    width: 30px;
}

.dia_nombre,
#mes_nombre {
    height: 20px;
    text-align: center;
}

#button_previous,
#button_next {
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.dias>td:hover {
    cursor: pointer;
    background-color: cyan;
}

.no_day {
    background-color: #e6e6e6;
}

.today {
    background-color: #c15ac1;
}

.evento_titulo {
    width: 100%;
}

.active {
    background-color: coral;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.tiene_evento {
  background-color: darkcyan;
}