:root {
    --square-size: 11px;
    --square-gap: 3px;
    --week-width: calc(var(--square-size) + var(--square-gap));
}

.months { grid-area: months; }
.days { grid-area: days; }
.squares { grid-area: squares; }

.graph {
    display: inline-grid;
    grid-template-areas: "empty months"
                       "days squares";
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
}

.days,
.squares {
    display: grid;
    grid-gap: var(--square-gap);
    grid-template-rows: repeat(7, var(--square-size));
}

.squares {
    grid-auto-flow: column;
    grid-auto-columns: var(--square-size);
}


.graph {
    border: 1px #e1e4e8 solid;
}

.days li:nth-child(odd) {
    visibility: hidden;
}

.squares li[data-level="-1"] {
    background-color: #FFFFFF;
}

.squares li[data-level="0"] {
    background-color: #ebedf0;
}

.squares li[data-level="1"] {
    background-color: #A9C2F1;
}

.squares li[data-level="2"] {
    background-color: #6A96EC;
}

.squares li[data-level="3"] {
    background-color: #0A55EC;
}
.squares li[data-level="4"] {
    background-color: #0441bd;
}