:root {
    --ft-size: 10px;
}
@media screen and (max-width: 768px) {
    :root {
        --ft-size: 12px;
    }
}

#calendar-container table {
    border: 1px solid #fff;
    border-left: 0;
    border-right: 0;
    width: 100%;
    border-collapse: collapse;
}
#calendar-container th,
#calendar-container td {
    border: 1px solid #fff;
    border-left: 0;
    border-right: 0;
    color: #fff;
    font-size: var(--ft-size);
    padding: 8px;
    text-align: center;
}
#calendar-container .holiday,
#calendar-container .closed {
    color: #941800;
    background-color: #FF8B8F;
}
.calendar-ttl p {
    color: #fff;
    font-size: var(--ft-size);
    text-align: center;
}
#calendar-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px;
}
#calendar-controls button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: var(--ft-size);
}
#calendar-controls button#prev::before {
    content: "<";
    color: #fff;
    font-size: var(--ft-size);
}
#calendar-controls button#next::after {
    content: ">";
    color: #fff;
    font-size: var(--ft-size);
}
#calendar-controls button#today {
    margin: 0 10px;
}