.github-card{

    margin-top:30px;

}

.github-header{


    display:flex;

    gap:20px;

    align-items:center;

}

.github-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

}

.github-header h2{

    font-weight:600;

    margin:0;

}

.github-header p{

    margin:4px 0 12px;

    color:var(--dim);

}

.github-stats{

    font-size: 0.8rem;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.github-heatmap{

    display:flex;

    gap:10px;

    margin-top:26px;

    align-items:flex-start;

}

.day-labels{

    display:grid;

    grid-template-rows:repeat(7,10px);

    row-gap:3px;

    width:28px;

    margin-top:38px;   /* aligns with first heatmap row */

    font-size:11px;

    color:var(--dim);

}

.day-labels span{

    display:flex;

    align-items:center;

    height:10px;

}

.heatmap-wrapper{

    display:flex;

    flex-direction:column;

    width:max-content;

}

#month-labels{

    display:flex;

    margin-bottom:6px;

    margin-left:0;

}

.month-label{

    width:13px;

    flex-shrink:0;

    font-size:11px;

    color:var(--dim);

}

#heatmap-grid{

    display:flex;

    gap:3px;

}

.week{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.day{

    width:10px;

    height:10px;

    border-radius:2px;

    background:var(--border);

    transition:transform .12s ease, background .12s ease;

    cursor:pointer;

}

.day[data-level="NONE"]{
    background:var(--heat-0);
}

.day[data-level="FIRST_QUARTILE"]{
    background:var(--heat-1);
}

.day[data-level="SECOND_QUARTILE"]{
    background:var(--heat-2);
}

.day[data-level="THIRD_QUARTILE"]{
    background:var(--heat-3);
}

.day[data-level="FOURTH_QUARTILE"]{
    background:var(--heat-4);
}

.day:hover{
    transform:scale(1.15);
}