body{
    font-family:Arial, Helvetica, sans-serif;
    background:#0f172a;
    color:white;
    text-align:center;
}

h1{
    margin-top:20px;
}

.heatmap{
    display:grid;
    grid-template-columns:repeat(53,15px);
    gap:4px;
    justify-content:center;
    margin-top:30px;
}

.day{
    width:15px;
    height:15px;
    background-color:#1e293b;
    border-radius:3px;
    cursor:pointer;
}

.level-1{background-color: #9be9a8;}
.level-2{background-color: #40c463;}
.level-3{background-color: #30a14e;}
.level-4{background-color: #216e39;}

.tooltip{
    position:absolute;
    background:black;
    color:white;
    padding:5px 8px;
    font-size: 12px;
    border-radius: 4px;
    pointer-events:none;
}