:root{--square-size:14px;--square-gap:4px;--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}.months{display:grid;grid-template-columns:calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 4) calc(var(--week-width) * 5) calc(var(--week-width) * 4) calc(var(--week-width) * 5)}.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{padding:10px;border:1px solid #e1e4e8;margin:10px}.days li:nth-child(odd){visibility:hidden}.squares li{background-color:#ebedf0;border-radius:50%}.squares li[data-level="1"]{background-color:#c6e48b}.squares li[data-level="2"]{background-color:#7bc96f}.squares li[data-level="3"]{background-color:#196127}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#555}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}