body {
    margin: 0;
    padding: 0;
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
}

.year-tab {
    padding: 0.5rem 1.5rem;
    border: none;
    background: none;
    font-size: 1.1rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.year-tab:hover {
    color: #333;
}

.year-tab.active {
    color: #333;
    font-weight: bold;
}

.year-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
}

.calendar {
    margin: 1em auto;
    background-color: white;
    width: 95%;
    min-height: 5em;
}
.month {
    min-height: 2em;
    padding-bottom: 5px;
    position: relative;
}

.day {
    border-bottom: 1px solid #eee;
    display: inline-block;
    background-color: white;
    min-height: 3.5em;
    text-align: right;
    font-size: 14px;
    width: 3%;
    overflow: overflow;
}
.day.today {
    border: green 1px solid;
    background-color: rgba(05,169,120,.6);
    font-weight: bold;
}
.day.booked {
    background: linear-gradient(0deg, #b9fbc0, 15%, #FFFFFF 15%);
}
.day.maybe {
    background: linear-gradient(0deg, #FFF0D9, 15%, #FFFFFF 15%);
}
.day.event {
    background: linear-gradient(0deg, #efefef, 15%, #FFFFFF 15%);
}
span.description {
    padding-top:1.6em;
    text-align: left;
    position: fixed;
    margin-left: -2em;
}
div.day > sup {
    font-size:50%;
    position:absolute;
    top: 2em;
    opacity: 0.2;
}
div.month:hover  sup {
    visibility: visible;
    opacity: 1;
}