header {
    position: rleative;display:block;
    width: 100%;text-align: center;background-position:center;
    padding: 25vh 0;background-repeat: no-repeat;background-size:cover;
}
header::before {
    position:absolute;top:0;left:0;width:100%;content: "";
    height:100%;background-color: var(--c-bg);opacity: 0.5;
}

.calendar-scroller {
    position:relative;display:grid;padding:2vh 0;width:100%;
    grid-template-columns: repeat(6, 1fr);gap: 4vh;
}
.calendar-reward {
    padding: 3vh;border-radius:1vh;background-color: var(--c-blue);overflow:hidden;
    display:inline-grid;opacity:0.5;background-size:cover;background-position: center;
}
.calendar-reward::before {
    position:absolute;top:0;left:0;width:100%;height:100%;content:"";
    background: radial-gradient(circle at 100% 50%, rgba(76, 131, 226, 0.5) 0%, #4C83E2 60%);
}
.rle-when {margin:0 0 6vh 0;}
.calendar-day {margin: 0.25vh 0 0.5vh 0;}
.date-rel {opacity:0.8;position:absolute;bottom:0;right:0;}
.calendar-reward .button {border-radius:1vh;background-color: transparent !important;border: solid 1px var(--c-white);}

.unlocked-gift {opacity:1 !important;box-shadow: 0 10px 30px 0 rgba(76, 131, 226, 0.5);}


div#snow {
    width: 15px;height: 15px;opacity:0.5;
    border-radius: 50%;filter: blur(0px);
    background-color: white;position: fixed;
    animation: fall 10s linear infinite;
    top: -50px;pointer-events:none;
}
@keyframes fall {100%{top: 100%;}}


@media (max-width: 2000px) {
    .calendar-scroller {grid-template-columns: repeat(5, 1fr);}
}
@media (max-width: 1800px) {
    .calendar-scroller {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 1500px) {
    .calendar-scroller {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 1300px) {
    .calendar-scroller {grid-template-columns: repeat(2, 1fr);}
    header {padding: 15vh 0;}
}
@media (max-width: 980px) {
    .calendar-scroller {grid-template-columns: repeat(1, 1fr);}
    header {padding: 10vh 0;}
}