.calendar-warpper {
    /*border: 1px solid black;*/
    height: auto;
}


/* Calendar rows */
.calendar-row {
    /*border: 1px solid black;*/
    /*opacity: 20%;*/
    /*opacity: 30%;*/
    height: 10vw;
    /*background: black;*/

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


    display: flex;

}
.calendar-divider {
    height: 2vw;
}


/* Calendar rows specific */
.first-row {
    gap: 3.8vw;
    margin-right: 1vw;
}
.second-row {
    gap: 3.8vw;
    margin-right: 1vw;
}


/* Day sprites */
.calendar-day {
    /*border: 1px solid black;*/

    /*background: red;*/
    width: 10vw;
    height: 10vw;
}
.day-sprite {
    opacity: 20%;
}
.calendar-day > * {
    width: auto;
    height : auto;
    max-height: 100%;
    max-width: 100%;
}


/* Mobile versions */
@media screen and (max-aspect-ratio: 1/1)  {

    .calendar-warpper {
        height: 40vw
    }


    .calendar-row {
        height: 18vw;
        gap: 8.1vw;
    }
    .calendar-divider {
        height: 5vw;

    }


    .calendar-day {
        height: 18vw;
        width: 18vw;
    }
}


/* Padlock */
.padlock-icon {
    height: 10vw;
    background: url("https://png.pngtree.com/png-clipart/20240328/original/pngtree-home-padlock-security-png-image_14701273.png");
    background-size: cover;
}
.padlock-icon:hover {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .padlock-icon {
        height: 18vw;
    }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}