body {
    background: url('../res/adventCalendar.png') no-repeat center center fixed;
    background-size: cover;
    background-image: linear-gradient(black, transparent);
}

#calendar {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.calendar-title-small, .calendar-title-large {
    text-align: center;
    color: #fff;
    font-family: 'Franklin Gothic Heavy';
    font-size: 56px;
    text-shadow: 0px 5px 10px black;
}

    .calendar-title-small img, .calendar-title-large img {
        max-height: 150px;
    }

.calendar-title-small {
    font-size: 28px;
    display: none;
}

@media (max-width: 752px) {
    .calendar-title-large {
        display: none;
    }
    .calendar-title-small {
        display: block;
    }
    .donation {
        display: flow !important;
    }
    .checkboxes {
        display: flex;
    }
    
}

@media (max-width: 316px) {
    .calendar-title-small {
        font-size: 22px;
    }
}

.door {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
}

    .door img {
        width: 100%;
        display: block;
        transition: transform 0.8s ease-in-out; /* Smooth compress effect */
        transform-origin: left center; /* Ensures the image compresses from the left edge */
    }

    /* Only the image compresses when the door is "opened" */
    .door.open img {
        transform: scaleX(0.4) rotateY(-40deg); /* Compress image width to 40% */
    }

    /* Optional shadow effect for visual feedback */
    .door::after {
        content: "";
        position: absolute;
        top: 0;
        left: -30%; /* Move shadow to extend beyond the image */
        width: 125%; /* Expand shadow width */
        height: 95%;
        background-color: rgba(0, 0, 0, 0.2);
        transition: opacity 0.8s ease-in-out;
        opacity: 0;
        z-index: -1;
        border-radius: 10%;
    }

    .door.open::after {
        opacity: 1;
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 0px;
}

.div20 {
    grid-area: 2 / 3 / 3 / 4;
}

.div2 {
    grid-area: 2 / 7 / 4 / 8;
    max-width: 99%;
}

.div3 {
    grid-area: 2 / 4 / 3 / 5;
}

.div4 {
    grid-area: 4 / 5 / 5 / 6;
}

.div9 {
    grid-area: 4 / 7 / 5 / 8;
}

.div17 {
    grid-area: 1 / 8 / 2 / 9;
}

.div7 {
    grid-area: 4 / 2 / 5 / 3;
}

.div8 {
    grid-area: 2 / 2 / 4 / 3;
    max-width: 98%;
}

.div3 {
    grid-area: 3 / 4 / 4 / 5;
}

.div5 {
    grid-area: 1 / 4 / 2 / 6;
    width: 100.5%;
}

.div11 {
    grid-area: 2 / 5 / 3 / 7;
}

.div19 {
    grid-area: 3 / 1 / 5 / 2;
    max-width: 98%;
}

.div13 {
    grid-area: 2 / 8 / 3 / 9;
}

.div14 {
    grid-area: 1 / 2 / 2 / 3;
    max-width: 98%;
}

.div22 {
    grid-area: 3 / 5 / 4 / 6;
}

.div23 {
    grid-area: 1 / 7 / 2 / 8;
}

.div6 {
    grid-area: 1 / 1 / 2 / 2;
}

.div18 {
    grid-area: 3 / 6 / 5 / 7;
}

.div24 {
    grid-area: 4 / 3 / 5 / 5;
}

.div20 {
    grid-area: 3 / 3 / 4 / 4;
}

.div21 {
    grid-area: 1 / 6 / 2 / 7;
}

.div15 {
    grid-area: 1 / 3 / 2 / 4;
}

.div16 {
    grid-area: 2 / 1 / 3 / 2;
}

.div12 {
    grid-area: 3 / 8 / 5 / 9;
}

/* Modal background overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
}

/* Modal box styling */
.modal {
    position: relative;
    width: 80%;
    max-height: 650px;
    max-width: 500px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-100px); /* Initial position above the viewport */
    transition: opacity 5s ease, transform 5s ease;
    display: block;
}

/* Modal when shown */
.modal-overlay.show {
    display: flex; /* Show overlay */
}

.modal.show {
    opacity: 1;
    transform: translateY(0); /* Slide in from the top */
    transition: opacity 5s ease, transform 5s ease;
}

/* Close button styling (optional) */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    cursor: pointer;
}

.snow {
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
    background-position: 0px -300px; /* Start the snow higher */
    animation: animatedBackground 40s linear infinite;
}

    .snow div {
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
        background-position: 0px -300px;
        animation: animatedBackground 60s linear infinite;
    }

@keyframes animatedBackground {
    from {
        background-position: 0 -300px;
    }

    to {
        background-position: 0 1000px; /* Extend the range to simulate longer fall */
    }
}