<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* .calendar {
    display: grid;
    width: 96%;
    max-width: 900px;
    margin: 2% auto;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 25px;

    grid-template-areas:
                          "d23      d20     d12"
                          "d2       d14     d4"
                          "d5       d22     d16"
                          "d1       d7      d9"
                          "d10      d11     d18"
                          "d13      d3      d15"
                          "d6       d17     d8"
                          "d19      d24     d21";
} */
.calendar {
    display: grid;
    width: 96%;
    max-width: 900px;
    margin: 2% auto;
    grid-template-rows: auto;
    grid-gap: 25px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
                    "d1 d2 d3 d4"
                    "d5 d6 d7 d8"
                    "d9 d10 d11 d12"
                    "d13 d14 d15 d16"
                    "d17 d18 d19 d20"
                    "d21 d22 d23 d24"
                    "d25 d26 d27 d28"
    
                    /* "d1 d6 d4 d17 d20 d20" */
}

@media only screen and (min-width: 500px) {

    .calendar {
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
                    "d1 d2 d3 d4 d5 d6 d7"
                    "d8 d9 d10 d11 d12 d13 d14"
                    "d15 d16 d17 d18 d19 d20 d21"
                    "d22 d23 d24 d25 d26 d27 d28"

        
    }

}

.day-1 {
    grid-area: d1;
}

.day-1 .back {
    background-color: #ff5330;
}

.day-2 {
    grid-area: d2;
}

.day-2 .back {
    background-color: #bfba26;
}

.day-3 {
    grid-area: d3;
}

.day-3 .back {
    background-color: #70ccc2;
}

.day-4 {
    grid-area: d4;
}

.day-4 .back {
    background-color: #b4a439;
}

.day-5 {
    grid-area: d5;
}

.day-5 .back {
    background-color: #ffa33f;
}

.day-6 {
    grid-area: d6;
}

.day-6 .back {
    background-color: #623a3a;
}

.day-7 {
    grid-area: d7;
}

.day-7 .back {
    background-color: #23a38f;
}

.day-8 {
    grid-area: d8;
}

.day-8 .back {
    background-color: #1ec165;
}

.day-9 {
    grid-area: d9;
}

.day-9 .back {
    background-color: #623a3a;
}

.day-10 {
    grid-area: d10;
}

.day-10 .back {
    background-color: #eec2a1;
}

.day-11 {
    grid-area: d11;
}

.day-11 .back {
    background-color: #d45d01;
}

.day-12 {
    grid-area: d12;
}

.day-12 .back {
    background-color: #ffa33f;
}

.day-13 {
    grid-area: d13;
}

.day-13 .back {
    background-color: #ff5330;
}

.day-14 {
    grid-area: d14;
}

.day-14 .back {
    background-color: #1ec165;
}

.day-15 {
    grid-area: d15;
}

.day-15 .back {
    background-color: #ffa33f;
}

.day-16 {
    grid-area: d16;
}

.day-16 .back {
    background-color: #623a3a;
}

.day-17 {
    grid-area: d17;
}

.day-17 .back {
    background-color: #70ccc2;
}

.day-18 {
    grid-area: d18;
}

.day-18 .back {
    background-color: #bfba26;
}

.day-19 {
    grid-area: d19;
}

.day-19 .back {
    background-color: #70ccc2;
}

.day-20 {
    grid-area: d20;
}

.day-20 .back {
    background-color: #1ec165;
}

.day-21 {
    grid-area: d21;
}

.day-21 .back {
    background-color: #23a38f;
}

.day-22 {
    grid-area: d22;
}

.day-22 .back {
    background-color: #eec2a1;
}

.day-23 {
    grid-area: d23;
}

.day-23 .back {
    background-color: #1ec165;
}

.day-24 {
    grid-area: d24;
}

.day-24 .back {
    background-color: #f0563d;
}


.day-25 {
    grid-area: d25;
}

.day-26 {
    grid-area: d26;
}

.day-27 {
    grid-area: d27;
}

.day-28 {
    grid-area: d28;
}

.calendar input {
    display: none;
}

label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;

    display: flex;
    min-height: 100%;
    width: 100%;
    height: 120px;
}

.door {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 300ms;
    border-radius: 10px;
    background-color: #2e313d;
}

.door form button {
    height: 100%;
    width: 100%;
}

.door div, .door form {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Kalam', cursive;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.door .back {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

:checked + .door {
    transform: rotateY(180deg);
}

.calendar button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
</pre></body></html>