header {
    text-align: center;
}

    header > h1 {
        color: blueviolet;
    }

.calendar-container {
    width: 100%;
}



.month-container {
    width: 100%;
    height: 100%;
}

.day-of-week {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 1em;
}

    .day-of-week > span {
        height: 3vh;
        text-align: center;
    }

.days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 1em;
}

.date {
    height: 8vh;
    text-align: center;
}
.wrapper {
    display: grid;
    /* Use a single grid cell to perfectly overlap the image and the grid */
    grid-template-areas: "stack-layer";
    position: relative;
    width: fit-content; /* Container takes the size of its content */
}

    .wrapper > * {
        grid-area: stack-layer; /* Force all children into the same visual spot */
    }

/* Ensure the image covers the full space without distortion */
img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.main-grid {
    display: grid;
    /* 10 equal-width columns and 5 equal-height rows */
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1px; /* Space between the main cells */
    pointer-events: none; /* Allows clicking "through" the grid overlay */
}

.main-cell {
    display: grid;
    /* Each main cell becomes a new 2x2 grid container */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px; /* Space between the four sub-cells */
    border: 1px solid rgb(255, 255, 255, 0.8); /* Semi-transparent border */
}

/* Optional styling to visualize the inner cells */
.sub-cell {
    background-color: rgba(0, 0, 255, 0.1); /* Light blue transparent overlay */
    border: 1px solid rgb(255, 216, 0, 0.2);
}

    .sub-cell.is-highlighted {
        background-color: rgb(255, 0, 0, 0.7); /* Bright yellow overlay */
        border-color: yellow;
    }