.calendar {
    background-color: #d4d4d4;
    display: grid;
    grid:
        "calendar-header" minmax(68px, auto) 
        "calendar-controls" minmax(40px, auto) 
        "calendar-days" minmax(40px, auto) 
        / 1fr;
    padding: 5px;
    width: 510px;
}

.calendar #calendar-header {
    grid-area: calendar-header;
}

.calendar #calendar-header h2 {
    font-size: 28px;
    margin: 0;
    padding: 20px 5px;
    text-align: center;
}

.calendar #calendar-controls {
    display: grid;
    grid:
        "calendar-select calendar-select calendar-select calendar-select" minmax(40px, auto) 
        "month-0         month-1         month-2         month-3        " minmax(40px, auto) 
        "month-4         month-5         month-6         month-7        " minmax(40px, auto) 
        "month-8         month-9         month-10        month-11       " minmax(40px, auto) 
        / 1fr 1fr 1fr 1fr;
    grid-area: calendar-controls;
}

.calendar #calendar-controls #calendar-years {
    border: 0;
    font-size: 16px;
    grid-area: calendar-select;
    margin: 10px 2px;
    padding: 10px 5px;
    text-align: center;
}

.calendar #calendar-controls .calendar-month {
    border: 0;
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
}

.calendar #calendar-controls .current {
    background-color: #0ff;
}

.calendar #calendar-days {
    align-items: center;
    display: grid;
    grid:
        "mon    tue    wed    thu    fri    sat    sun   " minmax(40px, auto) 
        "day-1  day-2  day-3  day-4  day-5  day-6  day-7 " minmax(40px, auto) 
        "day-8  day-9  day-10 day-11 day-12 day-13 day-14" minmax(40px, auto) 
        "day-15 day-16 day-17 day-18 day-19 day-20 day-21" minmax(40px, auto) 
        "day-22 day-23 day-24 day-25 day-26 day-27 day-28" minmax(40px, auto) 
        "day-29 day-30 day-31 day-32 day-33 day-34 day-35" minmax(40px, auto) 
        "day-36 day-37 .      .      .      .      .     " minmax(40px, auto) 
        / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-area: calendar-days;
}

.calendar #calendar-days span {
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
    text-align: center;
}

.calendar #calendar-days button {
    border: 0;
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
}

.calendar #calendar-days .current {
    background-color: #0ff;
}

.calendar #calendar-days .calendar-day-0 {
    grid-area: day-0;
}

.calendar #calendar-days .calendar-day-1 {
    grid-area: day-1;
}

.calendar #calendar-days .calendar-day-2 {
    grid-area: day-2;
}

.calendar #calendar-days .calendar-day-3 {
    grid-area: day-3;
}

.calendar #calendar-days .calendar-day-4 {
    grid-area: day-4;
}

.calendar #calendar-days .calendar-day-5 {
    grid-area: day-5;
}

.calendar #calendar-days .calendar-day-6 {
    grid-area: day-6;
}

.calendar #calendar-days .calendar-day-7 {
    grid-area: day-7;
}

.calendar #calendar-days .calendar-day-8 {
    grid-area: day-8;
}

.calendar #calendar-days .calendar-day-9 {
    grid-area: day-9;
}

.calendar #calendar-days .calendar-day-10 {
    grid-area: day-10;
}

.calendar #calendar-days .calendar-day-11 {
    grid-area: day-11;
}

.calendar #calendar-days .calendar-day-12 {
    grid-area: day-12;
}

.calendar #calendar-days .calendar-day-13 {
    grid-area: day-13;
}

.calendar #calendar-days .calendar-day-14 {
    grid-area: day-14;
}

.calendar #calendar-days .calendar-day-15 {
    grid-area: day-15;
}

.calendar #calendar-days .calendar-day-16 {
    grid-area: day-16;
}

.calendar #calendar-days .calendar-day-17 {
    grid-area: day-17;
}

.calendar #calendar-days .calendar-day-18 {
    grid-area: day-18;
}

.calendar #calendar-days .calendar-day-19 {
    grid-area: day-19;
}

.calendar #calendar-days .calendar-day-20 {
    grid-area: day-20;
}

.calendar #calendar-days .calendar-day-21 {
    grid-area: day-21;
}

.calendar #calendar-days .calendar-day-22 {
    grid-area: day-22;
}

.calendar #calendar-days .calendar-day-23 {
    grid-area: day-23;
}

.calendar #calendar-days .calendar-day-24 {
    grid-area: day-24;
}

.calendar #calendar-days .calendar-day-25 {
    grid-area: day-25;
}

.calendar #calendar-days .calendar-day-26 {
    grid-area: day-26;
}

.calendar #calendar-days .calendar-day-27 {
    grid-area: day-27;
}

.calendar #calendar-days .calendar-day-28 {
    grid-area: day-28;
}

.calendar #calendar-days .calendar-day-29 {
    grid-area: day-29;
}

.calendar #calendar-days .calendar-day-30 {
    grid-area: day-30;
}

.calendar #calendar-days .calendar-day-31 {
    grid-area: day-31;
}

.calendar #calendar-days .calendar-day-32 {
    grid-area: day-32;
}

.calendar #calendar-days .calendar-day-33 {
    grid-area: day-33;
}

.calendar #calendar-days .calendar-day-34 {
    grid-area: day-34;
}

.calendar #calendar-days .calendar-day-35 {
    grid-area: day-35;
}

.calendar #calendar-days .calendar-day-36 {
    grid-area: day-36;
}

.calendar #calendar-days .calendar-day-37 {
    grid-area: day-37;
}