activity-graph.github {
    --size: 16px;
    
    gap: 2px;
    border: 1px solid #d0d7de;
    border-radius: 0.375em;
    padding: 1em;
    display: inline-grid;
    width: 100%;
    overflow-x: scroll;
}

activity-graph.github::part(weekday-header),
activity-graph.github::part(month-header) {
    font-size: 12px;
}

activity-graph.github::part(weekday-header),
activity-graph.github::part(day) {
    height: var(--size);
    line-height: var(--size);
}

activity-graph.github::part(weekday-header) {
    padding-right: 0.25em;
}

activity-graph.github::part(weekday-header--even) {
    display: none;
}

activity-graph.github::part(month-header) {
    height: 13px;
    line-height: 13px;
}

activity-graph[month-limits='middle'].github::part(month-header) {
    text-align: center;
}

activity-graph.github::part(day) {
    border-radius: 2px;
    outline-offset: -1px;
    outline: 1px solid #1b1f230f;
    width: var(--size);
}

activity-graph.github::part(day--data-0) {
    background-color: #ff0000; /* Red */
}

activity-graph.github::part(day--data-1) {
    background-color: #ff7f7f; /* Light Red */
}

activity-graph.github::part(day--data-2) {
    background-color: #ff7f00; 
}

activity-graph.github::part(day--data-3) {
    background-color: #7fff7f; /* Light Green */
}

activity-graph.github::part(day--data-4) {
    background-color: #216e39;
}