@import url("https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");

/* calendar layout */
.calendar-grid {
    display: grid;
    width: 94%;
    max-width: 900px;
    margin: 3% auto 2rem auto;

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

    transform: translate3d(0px, 0px, 0px);

    grid-template-areas:
    "title  title  title"
    "info  info  info"
    "day22  day3   day8"
    "day9   day18  day11"
    "day2   day31  day13"
    "day12  day10  day4"
    "day20  day1   day7"
    "day5   day14  day17"
    "day16  day23  day6"
    "day15  day21  day19"
    "day25  day26  day27"
    "day28  day29  day30";
}

/* media query */
@media only screen and (min-width: 576px) {
    .calendar-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
      "title  title  title  day5   day17  day15"
      "title  title  title  day29  day20  day16"
      "info  info  day24  day30   day18  day12"
      "day6   day22  day14  day31  day31  day4  "
      "day10  day26  day2   day31  day31  day28"
      "day3   day9   day7   day13  day23  day19"
      "day8   day11   day27   day1  day25  day21"
    ;
    }
}

.calendar-grid .info {
    grid-area: info;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
    transform: rotate(-10deg);
    text-transform: uppercase;
    font-size: 1.1rem;
}
/* title */
.calendar-grid .title {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-grid .title h1 {
    font-size: 2rem;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
    /*display: flex;*/
    flex-direction: row;
}

@media only screen and (min-width: 576px) {
    .calendar-grid .title h1 {
        font-size: 3rem;
        flex-direction: column;
    }
}

.calendar-grid .title-1 {
    color: #000;
    display: block;
    transform: rotate(-10deg);
    margin-right: 1rem;
    font-size: 2.75rem;
}

.calendar-grid .title-2 {
    color: #000;
    display: block;
    transform: rotate(5deg);
    margin-right: 1rem;
}

.calendar-grid .title-3 {
    display: block;
    transform: rotate(-5deg);
}

/* opening/closing doors */
.calendar-grid .day {
    transform: translate3d(0px, 0px, 0px);
    position: relative;
}

.calendar-grid input {
    display: none;
}

.calendar-grid label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;
    display: flex;
    min-height: 100%;
    width: 100%;
    height: calc(85vw / 3);
    position: relative;
}

@media only screen and (min-width: 576px) {
    .calendar-grid label {
        height: 136px;
    }
}

.calendar-grid .door {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 300ms;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: 0.6rem;
    transform-origin: 0% 50%;
}

.calendar-grid .door div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.calendar-grid .door .back {
    background: linear-gradient(135deg, #333 0%, #333 50%, #000000 100%);
    transform: rotateY(-180deg);
    font-size: 16px;
    color: #fff;
}

.calendar-grid label:hover .door {
    border-color: #10303c;
}

.calendar-grid :checked + .door {
    transform: rotateY(-180deg);
    border-color: #000;
    border-style: solid;
}

.calendar-grid .title-container {
    opacity: 0;
    transform: translateY(-1rem);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1000;
    bottom: -3.7rem;
    left: -10rem;
    right: -10rem;
    transition: all 400ms ease-in-out;
}

.calendar-grid :checked ~ .title-container {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.calendar-grid .title-container a {
    position: relative;
    display: inline-block;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: #000000;
    color: #f1faee;
    font-size: 1.2rem;
    white-space: nowrap;
    text-decoration: none;
}

.calendar-grid .title-container a::before {
    content: "";
    display: block;
    border-radius: 0.75rem;
    background: repeating-linear-gradient(
            -45deg,
            #f1faee 0,
            #f1faee 0.5rem,
            #e63946 0.5rem,
            #e63946 1rem
    );
    background-size: 1.44rem 1.44rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: -1;
    top: -0.5rem;
    right: -0.5rem;
    bottom: -0.5rem;
    left: -0.5rem;
    -webkit-animation: calendar-item-link 0.6s infinite linear;
    animation: calendar-item-link 0.6s infinite linear;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.calendar-grid .title-container a:hover::before {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes calendar-item-link {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1.44rem 0;
    }
}

@keyframes calendar-item-link {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1.44rem 0;
    }
}

.calendar-grid .inside {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.6rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.calendar-grid.already-won .front {
    display: none;
}
.calendar-grid.already-won label{
    background: url("img/lock.jpg") no-repeat center center;
    background-size: 100%;
    border-radius: 10px;
}

.calendar-grid .inside-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #2f4f8c;
    color: #ffffff;
}

.calendar-grid :checked ~ .inside {
    opacity: 1;
}

/* Calendar day positions and z-indexes */
.calendar-grid .day-0 {
    grid-area: day0;
    z-index: 11;
}
.calendar-grid .day-1 {
    grid-area: day1;
    z-index: 11;
}
.calendar-grid .day-2 {
    grid-area: day2;
    z-index: 16;
}
.calendar-grid .day-3 {
    grid-area: day3;
    z-index: 23;
}
.calendar-grid .day-4 {
    grid-area: day4;
    z-index: 15;
}
.calendar-grid .day-5 {
    grid-area: day5;
    z-index: 7;
}
.calendar-grid .day-6 {
    grid-area: day6;
    z-index: 6;
}
.calendar-grid .day-7 {
    grid-area: day7;
    z-index: 12;
}
.calendar-grid .day-8 {
    grid-area: day8;
    z-index: 24;
}
.calendar-grid .day-28 {
    grid-area: day28;
    z-index: 24;
}
.calendar-grid .day-9 {
    grid-area: day9;
    z-index: 19;
}
.calendar-grid .day-10 {
    grid-area: day10;
    z-index: 14;
}
.calendar-grid .day-11 {
    grid-area: day11;
    z-index: 21;
}
.calendar-grid .day-29 {
    grid-area: day29;
    z-index: 21;
}
.calendar-grid .day-12 {
    grid-area: day12;
    z-index: 13;
}
.calendar-grid .day-13 {
    grid-area: day13;
    z-index: 18;
}
.calendar-grid .day-14 {
    grid-area: day14;
    z-index: 8;
}
.calendar-grid .day-15 {
    grid-area: day15;
    z-index: 1;
}
.calendar-grid .day-16 {
    grid-area: day16;
    z-index: 4;
}
.calendar-grid .day-17 {
    grid-area: day17;
    z-index: 9;
}
.calendar-grid .day-18 {
    grid-area: day18;
    z-index: 20;
}
.calendar-grid .day-19 {
    grid-area: day19;
    z-index: 3;
}
.calendar-grid .day-20 {
    grid-area: day20;
    z-index: 10;
}
.calendar-grid .day-21 {
    grid-area: day21;
    z-index: 2;
}
.calendar-grid .day-22 {
    grid-area: day22;
    z-index: 22;
}
.calendar-grid .day-23 {
    grid-area: day23;
    z-index: 5;
}
.calendar-grid .day-31 {
    grid-area: day31;
    z-index: 17;
}
.calendar-grid .day-25 {
    grid-area: day25;
    z-index: 17;
}
.calendar-grid .day-26 {
    grid-area: day26;
    z-index: 17;
}
.calendar-grid .day-27 {
    grid-area: day27;
    z-index: 17;
}
.calendar-grid .day-30 {
    grid-area: day30;
    z-index: 17;
}

@media only screen and (min-width: 576px) {
    .calendar-grid .day-1 {
        z-index: 16;
    }
    .calendar-grid .day-2 {
        z-index: 9;
    }
    .calendar-grid .day-3 {
        z-index: 1;
    }
    .calendar-grid .day-4 {
        z-index: 15;
    }
    .calendar-grid .day-5 {
        z-index: 22;
    }
    .calendar-grid .day-6 {
        z-index: 11;
    }
    .calendar-grid .day-7 {
        z-index: 3;
    }
    .calendar-grid .day-8 {
        z-index: 10;
    }
    .calendar-grid .day-9 {
        z-index: 2;
    }
    .calendar-grid .day-10 {
        z-index: 7;
    }
    .calendar-grid .day-11 {
        z-index: 19;
    }
    .calendar-grid .day-12 {
        z-index: 18;
    }
    .calendar-grid .day-13 {
        z-index: 4;
    }
    .calendar-grid .day-14 {
        z-index: 13;
    }
    .calendar-grid .day-15 {
        z-index: 24;
    }
    .calendar-grid .day-16 {
        z-index: 21;
    }
    .calendar-grid .day-17 {
        z-index: 23;
    }
    .calendar-grid .day-18 {
        z-index: 17;
    }
    .calendar-grid .day-19 {
        z-index: 6;
    }
    .calendar-grid .day-20 {
        z-index: 20;
    }
    .calendar-grid .day-21 {
        z-index: 8;
    }
    .calendar-grid .day-22 {
        z-index: 12;
    }
    .calendar-grid .day-23 {
        z-index: 5;
    }
    .calendar-grid .day-31 {
        z-index: 14;
    }
}

@media only screen and (max-width: 575px) {
    .calendar-grid .day-2 .title-container,
    .calendar-grid .day-5 .title-container,
    .calendar-grid .day-9 .title-container,
    .calendar-grid .day-12 .title-container,
    .calendar-grid .day-15 .title-container,
    .calendar-grid .day-16 .title-container,
    .calendar-grid .day-20 .title-container,
    .calendar-grid .day-22 .title-container {
        left: 0;
        right: auto;
    }

    .calendar-grid .day-4 .title-container,
    .calendar-grid .day-6 .title-container,
    .calendar-grid .day-7 .title-container,
    .calendar-grid .day-8 .title-container,
    .calendar-grid .day-11 .title-container,
    .calendar-grid .day-13 .title-container,
    .calendar-grid .day-17 .title-container,
    .calendar-grid .day-19 .title-container {
        left: auto;
        right: 0;
    }
}

/**
 * CALENDAR DAYS
 */

/**
 * Day 1 - Gingerbread man
 * https://codepen.io/johnnyfekete/pen/ZEpGerj
 */
.gingerbread-man-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
            75deg,
            transparent,
            transparent 20px,
            #9e1628 10px,
            #9e1628 40px
    ),
    linear-gradient(to bottom, #b11e31, #c23446);
}

.gingerbread-man-container::after {
    content: "";
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.5) 25%,
            rgba(0, 0, 0, 0) 50%
    );
}
.gingerbread-man {
    --ginger-color: #c5753d;
    --dark-ginger-color: #974919;
    --white-color: #f0e5d9;
    --green-color: #50af52;
    --red-color: #b22922;

    transform: scale(0.46) translateY(-6.5rem);
    position: relative;
}

@media only screen and (min-width: 576px) {
    .gingerbread-man {
        transform: scale(0.56) translateY(-3.7rem);
    }
}

.gingerbread-man .head {
    width: 5rem;
    height: 5rem;
    position: relative;
}

.gingerbread-man .head::after {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: var(--ginger-color);
    border-radius: 2.2rem;
    transform: rotate(-15deg);
}

.gingerbread-man .eye {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--white-color);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 2;
}

.gingerbread-man .eye.eye--left {
    left: 22%;
    top: 45%;
}

.gingerbread-man .eye.eye--right {
    right: 25%;
    top: 40%;
}

.gingerbread-man .eyebrow {
    position: absolute;
    z-index: 2;
    height: 0.3rem;
    border-radius: 0.3rem;
    background-color: var(--green-color);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.5),
    inset -1px 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.gingerbread-man .eyebrow.eyebrow--left {
    top: 1.6rem;
    left: 0.8rem;
    transform: rotate(-35deg);
    width: 0.9rem;
    height: 0.25rem;
}

.gingerbread-man .eyebrow.eyebrow--right {
    top: 1.35rem;
    right: 1.32rem;
    transform: rotate(10deg);
    width: 0.9rem;
    height: 0.3rem;
}

.gingerbread-man .mouth {
    position: absolute;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    top: 1.7rem;
    left: 1rem;
    transform-origin: center center;
    transform: rotate(-150deg);
}

.gingerbread-man .mouth div {
    box-sizing: border-box;
    position: absolute;
}

.gingerbread-man .mouth__lower-lip {
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
}

.gingerbread-man .mouth__lower-lip::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--red-color);
    border-radius: 50%;
}

.gingerbread-man .mouth__left-lip {
    width: 0.75rem;
    height: 1.5rem;
    overflow: hidden;
    left: 1.5rem;
    top: 0rem;
}

.gingerbread-man .mouth__left-lip::after {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: -0.5rem;
    border: 3px solid var(--red-color);
    border-radius: 50%;
}

.gingerbread-man .mouth__right-lip {
    width: 1rem;
    height: 0.5rem;
    overflow: hidden;
    left: 0rem;
    top: 1.5rem;
}

.gingerbread-man .mouth__right-lip::after {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.4rem;
    border: 3px solid var(--red-color);
    border-radius: 50%;
}

.gingerbread-man .mouth__upper-lip {
    width: 0.8rem;
    height: 0.7rem;
    overflow: hidden;
    left: 0.7rem;
    top: 0.8rem;
}

.gingerbread-man .mouth__upper-lip::after {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1rem;
    margin-top: 0.1rem;
    border: 3px solid var(--red-color);
    border-radius: 50%;
}

.gingerbread-man .body {
    position: relative;
    width: 5rem;
    height: 8rem;
}

.gingerbread-man .arm {
    width: 5rem;
    height: 2.2rem;
    background-color: var(--ginger-color);
    background: linear-gradient(
            to right,
            var(--dark-ginger-color) 0%,
            var(--ginger-color) 50%
    );
    border-radius: 1rem;
    position: absolute;
}

.gingerbread-man .arm::after {
    content: "\00a0\00a0\00a0\00a0\00a0";
    width: 2.2rem;
    height: 1rem;
    overflow: hidden;
    display: block;
    font-size: 2rem;
    line-height: 0;
    -webkit-text-decoration: underline white wavy;
    text-decoration: underline white wavy;
    transform: rotate(90deg) translateX(0.6rem) translateY(-0.5rem);
    transform-origin: center center;
}

.gingerbread-man .arm.arm--left {
    transform: rotate(-35deg) translateX(-1.5rem) translateY(-0.8rem);
}

.gingerbread-man .arm.arm--right {
    transform: rotate(-145deg) translateX(-1.5rem) translateY(1rem);
}

.gingerbread-man .leg {
    width: 2.2rem;
    height: 8rem;
    background-color: var(--ginger-color);
    background: linear-gradient(
            to top,
            var(--dark-ginger-color) 0%,
            var(--ginger-color) 40%
    );
    border-radius: 1rem;
    position: absolute;
}

.gingerbread-man .leg::after {
    content: "\00a0\00a0\00a0\00a0\00a0";
    width: 2.2rem;
    height: 1rem;
    overflow: hidden;
    display: block;
    font-size: 2rem;
    line-height: 0;
    -webkit-text-decoration: underline white wavy;
    text-decoration: underline white wavy;
    position: absolute;
    bottom: 1.2rem;
}

.gingerbread-man .leg.leg--left {
    transform: rotate(10deg) translateX(0.5rem) translateY(0rem);
}

.gingerbread-man .leg.leg--right {
    transform: rotate(-10deg) translateX(2.4rem) translateY(0.4rem);
}

.gingerbread-man .belt::after {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    width: 4.1rem;
    height: 2rem;
    overflow: hidden;
    display: block;
    font-size: 1.8rem;
    line-height: 0;
    -webkit-text-decoration: underline white wavy;
    text-decoration: underline white wavy;
    position: absolute;
    top: 3.3rem;
    left: 0.5rem;
    z-index: 3;
    transform: rotate(4deg);
}

.gingerbread-man .button {
    position: absolute;
    width: 1.2rem;
    height: 1.1rem;
    border-radius: 50%;
    background-color: var(--white-color);
}

.gingerbread-man .button::after {
    content: "";
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--green-color);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.3),
    inset -3px 3px 5px 0 rgba(255, 255, 255, 0.2);
    margin-left: 0.15rem;
}

.gingerbread-man .button.button--top {
    left: 2rem;
    top: 0.3rem;
}

.gingerbread-man .button.button--bottom {
    left: 2.1rem;
    top: 2.1rem;
    transform: rotate(145deg);
}

/**
 * Day 2 - Snowflake
 * https://codepen.io/johnnyfekete/pen/ExgVmaJ
 */
.snowflake-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, red 0, #002255 100%);
}

.snowflake-resize {
    transform: scale(0.3);
}
@media only screen and (min-width: 576px) {
    .snowflake-resize {
        transform: scale(0.35);
    }
}

.snowflake {
    --snowflake-color: #ffffff;

    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    -webkit-animation: rotation 20s infinite linear;
    animation: rotation 20s infinite linear;
}

.snowflake div {
    position: absolute;
    background-color: var(--snowflake-color);
    width: 1rem;
    border-radius: 0.5rem;
}

.snowflake .side {
    bottom: -0.5rem;
    left: -0.5rem;
    height: 10rem;
    transform-origin: 0.5rem 9.5rem;
}

.snowflake .side-l-1 {
    bottom: 2.5rem;
    left: 0rem;
    height: 5rem;
    transform-origin: 0.5rem 4.5rem;
    transform: rotate(-60deg);
}

.snowflake .side-r-1 {
    bottom: 2.5rem;
    left: 0rem;
    height: 5rem;
    transform-origin: 0.5rem 4.5rem;
    transform: rotate(60deg);
}

.snowflake .side-l-2 {
    bottom: 6.5rem;
    left: 0rem;
    width: 0.8rem;
    height: 3rem;
    transform-origin: 0.4rem 2.5rem;
    transform: rotate(-45deg);
}

.snowflake .side-r-2 {
    bottom: 6.5rem;
    left: 0.2rem;
    width: 0.8rem;
    height: 3rem;
    border-radius: 0.5rem;
    transform-origin: 0.4rem 2.5rem;
    transform: rotate(45deg);
}

.snowflake .side-2 {
    transform: rotate(60deg);
}
.snowflake .side-3 {
    transform: rotate(120deg);
}
.snowflake .side-4 {
    transform: rotate(180deg);
}
.snowflake .side-5 {
    transform: rotate(240deg);
}
.snowflake .side-6 {
    transform: rotate(300deg);
}

@-webkit-keyframes snowflake-rotation-large {
    from {
        transform: rotate(0deg) scale(0.35);
    }
    to {
        transform: rotate(359deg) scale(0.35);
    }
}

@keyframes snowflake-rotation-large {
    from {
        transform: rotate(0deg) scale(0.35);
    }
    to {
        transform: rotate(359deg) scale(0.35);
    }
}

@-webkit-keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

/**
 * Day 3 - Stocking
 * https://codepen.io/johnnyfekete/pen/BaLjoaV
 */

.stocking-container {
    --stocking-background: #b2b09b;
    --stocking-red: #a93f55;
    --stocking-heel: #f2545b;
    --stocking-blue: rgba(25, 50, 60, 0.4);
    --stocking-wool: #f3f7f0;

    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
            circle at center,
            var(--stocking-background) 0,
            rgb(25, 50, 60) 200%
    );
}

.stocking {
    position: absolute;
    transform: rotate(20deg) scale(0.3) translateY(-1rem);
}

@media only screen and (min-width: 576px) {
    .stocking {
        transform: rotate(20deg) scale(0.35) translateY(-1rem);
    }
}

.stocking .stocking-hanger {
    width: 0.3rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--stocking-heel);
    transform-origin: bottom center;
    transform: rotate(-20deg);
}

.stocking .stocking-wool {
    position: relative;
    z-index: 3;
    width: 6.4rem;
    height: 4rem;
    margin-left: -0.2rem;
    background-color: var(--stocking-wool);
}

.stocking .stocking-wool::after {
    content: "";
    position: absolute;
    display: block;
    width: 7.4rem;
    height: 5rem;
    top: -0.5rem;
    left: -0.5rem;
    background-image: radial-gradient(
            var(--stocking-wool) 50%,
            rgba(255, 255, 255, 0) 70%
    );
    background-position: 0 0;
    background-size: 0.925rem 1rem;
}

.stocking .stocking-leg {
    position: relative;
    width: 6rem;
    height: 10rem;
    border-radius: 0 0 0 2rem;
    background: repeating-linear-gradient(
            20deg,
            transparent,
            transparent 10px,
            var(--stocking-blue) 5px,
            var(--stocking-blue) 20px
    ),
    repeating-linear-gradient(
            110deg,
            transparent,
            transparent 10px,
            var(--stocking-blue) 5px,
            var(--stocking-blue) 20px
    );
    background-color: var(--stocking-red);
    overflow: hidden;
}

.stocking .stocking-foot {
    position: absolute;
    width: 5rem;
    height: 10rem;
    border-radius: 2rem;
    background: repeating-linear-gradient(
            20deg,
            transparent,
            transparent 10px,
            var(--stocking-blue) 5px,
            var(--stocking-blue) 20px
    ),
    repeating-linear-gradient(
            110deg,
            transparent,
            transparent 10px,
            var(--stocking-blue) 5px,
            var(--stocking-blue) 20px
    );
    background-color: var(--stocking-red);
    transform-origin: top left;
    transform: rotate(-70deg) translateY(-0.6rem);
    overflow: hidden;
}

.stocking .stocking-heel {
    position: relative;
    z-index: 2;
    width: 6rem;
    height: 6rem;
    border-radius: 4rem;
    background-color: var(--stocking-heel);
}

.stocking .stocking-leg .stocking-heel {
    position: absolute;
    bottom: -3rem;
    margin-left: -3rem;
}

.stocking .stocking-foot .stocking-heel {
    margin-left: -3rem;
    margin-top: -2rem;
}

/**
 * Day 4 - Animated 3D gift box
 * https://codepen.io/johnnyfekete/pen/NWRxmwG
 */
.gift-box-day {
    background: linear-gradient(
            200deg,
            #1d3557 33%,
            #457b9d 33%,
            #457b9d 66%,
            #a8dadc 66%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-box-container {
    width: 200px;
    height: 200px;
    perspective: 400px;
    transform: translateY(-40px) scale(0.3);
}

@media only screen and (min-width: 576px) {
    .gift-box-container {
        transform: translateY(-20px) scale(0.4);
    }
}

.gift-box {
    --gift-box-color: #e63946;
    --gift-box-edge-color: #590b11;
    --wrap-color: #f1faee;
    --wrap-ribbon-color: #c0e4e6;
    --wrap-top-color: #d8efef;

    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    -webkit-animation: rotation-3d 20s infinite linear;
    animation: rotation-3d 20s infinite linear;
}

.gift-box .gift-box__side,
.gift-box .gift-box__end {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__side {
    position: absolute;
    width: 220px;
    height: 50px;
    border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__end {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box__side,
.gift-box .gift-box-lid__side {
    background: linear-gradient(
            to right,
            var(--gift-box-color) 40%,
            var(--wrap-color) 40%,
            var(--wrap-color) 60%,
            var(--gift-box-color) 60%
    );
}
.gift-box .gift-box__end,
.gift-box .gift-box-lid__end {
    background: linear-gradient(
            to right,
            transparent 40%,
            var(--wrap-top-color) 40%,
            var(--wrap-top-color) 60%,
            transparent 60%
    ),
    linear-gradient(
            to bottom,
            var(--gift-box-color) 40%,
            var(--wrap-color) 40%,
            var(--wrap-color) 60%,
            var(--gift-box-color) 60%
    );
}

.gift-box .gift-box__side--front {
    transform: rotateY(0deg) translateZ(100px);
}
.gift-box .gift-box__side--back {
    transform: rotateY(180deg) translateZ(100px);
}
.gift-box .gift-box__side--left {
    transform: rotateY(-90deg) translateZ(100px);
}
.gift-box .gift-box__side--right {
    transform: rotateY(90deg) translateZ(100px);
}
.gift-box .gift-box__side--top {
    transform: rotateX(90deg) translateZ(100px);
}
.gift-box .gift-box__side--bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.gift-box .gift-box-lid__side--front {
    transform: rotateY(0deg) translateZ(110px) translateX(-10px) translateY(-10px);
}
.gift-box .gift-box-lid__side--back {
    transform: rotateY(180deg) translateZ(110px) translateX(10px)
    translateY(-10px);
}
.gift-box .gift-box-lid__side--left {
    transform: rotateY(-90deg) translateZ(120px) translateY(-10px);
}
.gift-box .gift-box-lid__side--right {
    transform: rotateY(90deg) translateZ(100px) translateY(-10px);
}
.gift-box .gift-box-lid__side--top {
    transform: rotateX(90deg) translateZ(120px) translateX(-10px) translateY(0);
}

.gift-box .ribbon-l {
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid var(--wrap-ribbon-color);
    border-radius: 50% 50% 0 50%;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateX(75deg) rotateY(90deg)
        /* use a CSS variable for the translate, defined in CSS */
    translateZ(calc(80px - var(--gift-box-position))) translateX(-85px)
    translateY(-75px) skewY(30deg);
}

.gift-box .ribbon-r {
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid var(--wrap-ribbon-color);
    border-radius: 50% 50% 0 50%;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateX(-5deg) rotateY(90deg)
        /* use a CSS variable for the translate, defined in CSS */
    translateZ(calc(80px - var(--gift-box-position))) translateX(-30px)
    translateY(-110px) skewY(30deg);
}

.ribbon-l-end {
    position: absolute;
    width: 40px;
    height: 110px;
    background: linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%),
    linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
    border: 2px solid var(--gift-box-edge-color);
    border-top: none;
    border-bottom: none;
    transform: rotateX(-70deg) translateX(80px) translateY(-80px)
    translateZ(-60px);
}

.ribbon-r-end {
    position: absolute;
    width: 40px;
    height: 110px;
    background: linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%),
    linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
    border: 2px solid var(--gift-box-edge-color);
    border-top: none;
    border-bottom: none;
    transform: rotateX(80deg) translateX(80px) translateY(-80px) translateZ(60px);
}

@-webkit-keyframes rotation-3d {
    from {
        transform: translateZ(-100px) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
    }
    to {
        transform: translateZ(-100px) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
    }
}

@keyframes rotation-3d {
    from {
        transform: translateZ(-100px) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
    }
    to {
        transform: translateZ(-100px) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
    }
}

/**
 * Day 5 - Sledge in the snow
 * https://codepen.io/johnnyfekete/pen/wvzGoRr
 */
.sledge-container {
    background: linear-gradient(-20deg, #f8f9fa 60%, #3d405b 60%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sledge {
    --sledge-runner: #6c757d;
    --sledge-wood-light: #9c6644;
    --sledge-wood-dark: #7f5539;
    --sledge-edge: #2d1e14;

    width: 20rem;
    height: 10rem;
    position: relative;
    transform: rotate(-16deg) scale(0.25) translateX(-7rem) translateY(-5rem);
}

@media only screen and (min-width: 576px) {
    .sledge {
        transform: rotate(-16deg) scale(0.3) translateX(-7rem);
    }
}

.sledge .sledge-runner__front {
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    position: absolute;
    top: 6rem;
}
.sledge .sledge-runner__front::after {
    content: "";
    display: block;
    margin-top: -4rem;
    width: 8rem;
    height: 8rem;
    background: radial-gradient(
            closest-side,
            transparent 75%,
            var(--sledge-runner) 27%,
            var(--sledge-runner) 99%,
            transparent 100%
    );
}

.sledge .sledge-runner__front--top {
    transform-origin: top right;
    transform: rotate(30deg);
}

.sledge .sledge-runner {
    position: absolute;
    width: 16rem;
    height: 1rem;
    background-color: var(--sledge-runner);
    top: 9rem;
    left: 4rem;
}

.sledge .sledge-runner__left-leg {
    position: absolute;
    width: 3rem;
    height: 1rem;
    background-color: var(--sledge-runner);
    transform: rotate(120deg);
    bottom: 1.2rem;
    left: 1rem;
}

.sledge .sledge-runner__right-leg {
    position: absolute;
    width: 3rem;
    height: 1rem;
    background-color: var(--sledge-runner);
    transform: rotate(60deg);
    bottom: 1.2rem;
    left: 8rem;
}

.sledge .sledge-runner__back {
    position: absolute;
    transform: scaleY(0.8) scaleX(0.95) translateX(3rem) translateY(-2rem);
}

.sledge .sledge-seat {
    position: absolute;
    z-index: 2;
    top: 1.5rem;
    left: 5rem;
}

.sledge .sledge-top {
    transform: skewX(-40deg);
}

.sledge .sledge-top__piece {
    box-sizing: border-box;
    width: 15rem;
    height: 0.8rem;
    background: linear-gradient(
            to bottom,
            var(--sledge-wood-light) 0%,
            var(--sledge-wood-dark) 100%
    );
    border: 1.5px solid var(--sledge-edge);
}

.sledge .sledge-back {
    position: absolute;
    right: 0;
    top: 0;
    transform: skewY(-50deg) rotate(90deg) scaleX(1.8) scaleY(0.85)
    translateX(0.6rem) translateY(-0.4rem);
}

.sledge .sledge-back__piece {
    box-sizing: border-box;
    width: 0.8rem;
    height: 0.8rem;
    background: linear-gradient(
            to bottom,
            var(--sledge-wood-light) 0%,
            var(--sledge-wood-dark) 100%
    );
    border: 1.5px solid var(--sledge-edge);
}

.sledge .sledge-side {
    position: absolute;
    left: -2rem;
    margin-top: -0.05rem;
    box-sizing: border-box;
    width: 14.95rem;
    height: 1.45rem;
    background-color: var(--sledge-wood-dark);
    border: 1.5px solid var(--sledge-edge);
}

/**
 * Day 6 - Santa
 * https://codepen.io/johnnyfekete/pen/oNzxMPW
 */
.santa-container {
    display: flex;
    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 1rem,
            rgba(154, 140, 152, 0.3) 1rem,
            rgba(154, 140, 152, 0.3) 2rem
    ),
    repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 1rem,
            rgba(154, 140, 152, 0.3) 1rem,
            rgba(154, 140, 152, 0.3) 2rem
    ),
    linear-gradient(to bottom, #f2e9e4, #f2e9e4);
    align-items: center;
    justify-content: center;
}

.santa {
    --santa-face: #f9dcc4;
    --santa-beard: #ffffff;
    --santa-moustache: #e0e0e0;
    --santa-nose: #ffb5a7;
    --santa-hat: #e63946;
    --santa-border: #03071e;

    width: 14rem;
    height: 16rem;
    position: relative;

    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.3));

    transform: scale(0.33) translateY(-13rem) translateX(-3rem);
}

@media only screen and (min-width: 576px) {
    .santa {
        transform: scale(0.4) translateY(-8rem) translateX(-2rem);
    }
}

.santa .santa-head {
    position: absolute;
    top: 4rem;
    left: 1rem;
    width: 12rem;
    height: 12rem;
    filter: drop-shadow(2px 2px 0 var(--santa-border))
    drop-shadow(-2px 2px 0 var(--santa-border))
    drop-shadow(2px -2px 0 var(--santa-border))
    drop-shadow(-2px -2px 0 var(--santa-border));
}

.santa .santa-beard {
    position: absolute;
    left: 5rem;
    width: 2rem;
    height: 12rem;
    background-color: var(--santa-beard);
    border-radius: 1rem;
    transform-origin: center center;
    height: 12rem;
}

.santa .santa-beard:nth-child(2) {
    transform: rotate(15deg);
}
.santa .santa-beard:nth-child(3) {
    transform: rotate(30deg);
}
.santa .santa-beard:nth-child(4) {
    transform: rotate(45deg);
}
.santa .santa-beard:nth-child(5) {
    transform: rotate(60deg);
}
.santa .santa-beard:nth-child(6) {
    transform: rotate(75deg);
}
.santa .santa-beard:nth-child(7) {
    transform: rotate(90deg);
}
.santa .santa-beard:nth-child(8) {
    transform: rotate(105deg);
}
.santa .santa-beard:nth-child(9) {
    transform: rotate(120deg);
}
.santa .santa-beard:nth-child(10) {
    transform: rotate(135deg);
}
.santa .santa-beard:nth-child(11) {
    transform: rotate(150deg);
}
.santa .santa-beard:nth-child(12) {
    transform: rotate(165deg);
}

.santa .santa-face {
    position: absolute;
    left: 2rem;
    top: 3rem;
    width: 8rem;
    height: 3rem;
    overflow: hidden;
}

.santa .santa-face::before {
    display: block;
    content: "";
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    top: -2rem;
    width: 8rem;
    height: 8rem;
    background-color: var(--santa-face);
    border-radius: 50%;
    border: 2px solid var(--santa-border);
}

.santa .santa-moustache {
    position: absolute;
    z-index: 3;
    top: 5rem;
    width: 2rem;
    height: 2rem;
    background-color: var(--santa-moustache);
    border-radius: 50%;
    border: 2px solid var(--santa-border);
}

.santa .santa-moustache::after {
    display: block;
    content: "";
    position: absolute;
    left: -2rem;
    width: 3rem;
    height: 2rem;
    background: radial-gradient(
            farthest-side,
            transparent 33.3%,
            var(--santa-border) 33.3%,
            var(--santa-border) 37%,
            var(--santa-moustache) 38%
    );
    background-position: -3rem -2rem;
    background-size: 300% 200%;
    border-radius: 0 100% 0 100%;
    border-bottom: 2px solid var(--santa-border);
}

.santa .santa-moustache--left {
    left: 4rem;
    transform: rotate(-10deg) translateX(-0.4rem) translateY(-0.2rem);
}

.santa .santa-moustache--right {
    left: 6rem;
    transform: scaleX(-1) rotate(-10deg) translateX(-0.1rem) translateY(-0.2rem);
}

.santa .santa-nose {
    position: absolute;
    z-index: 3;
    left: calc(50% - 0.9rem);
    top: 4.5rem;
    width: 1.8rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 2px solid var(--santa-border);
    box-sizing: border-box;
    background-color: var(--santa-nose);
}

.santa .santa-eye {
    position: absolute;
    z-index: 4;
    top: 3.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--santa-border);
}

.santa .santa-eye::before {
    position: absolute;
    display: block;
    content: "";
    top: 0.8rem;
    left: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: var(--santa-beard);
}

.santa .santa-eye::after {
    position: absolute;
    display: block;
    content: "";
    top: 0.2rem;
    left: 0.5rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--santa-beard);
}

.santa .santa-eye--left {
    left: 4rem;
}

.santa .santa-eye--right {
    left: 6.4rem;
}

.santa .santa-hat {
    position: absolute;
    top: -2rem;
    left: -1rem;
    width: 12rem;
    height: 6rem;
}

.santa .santa-hat-background {
    position: absolute;
    width: 12rem;
    height: 6rem;
    border-radius: 6rem 6rem 0 0;
    background: radial-gradient(
            circle at 20% 100%,
            transparent 14%,
            var(--santa-hat) 14%
    );
    filter: drop-shadow(1px 1px 0 var(--santa-border))
    drop-shadow(-1px 1px 0 var(--santa-border))
    drop-shadow(1px -1px 0 var(--santa-border))
    drop-shadow(-1px -1px 0 var(--santa-border));
}

.santa .santa-hat-front {
    position: absolute;
    top: 5.8rem;
    left: 3rem;
    width: 10rem;
    height: 3rem;
    filter: drop-shadow(1px 1px 0 var(--santa-border))
    drop-shadow(-1px 1px 0 var(--santa-border))
    drop-shadow(1px -1px 0 var(--santa-border))
    drop-shadow(-1px -1px 0 var(--santa-border));
}

.santa .santa-hat-front-bg {
    position: absolute;
    width: 0.666rem;
    height: 3rem;
    border-radius: 0.333rem 0.333rem 0 0;
    background: var(--santa-moustache);
}

.santa .santa-hat-front-bg:nth-child(1) {
    left: 0.666rem;
}
.santa .santa-hat-front-bg:nth-child(2) {
    left: 1.333rem;
}
.santa .santa-hat-front-bg:nth-child(3) {
    left: 2rem;
}
.santa .santa-hat-front-bg:nth-child(4) {
    left: 2.666rem;
}
.santa .santa-hat-front-bg:nth-child(5) {
    left: 3.333rem;
}
.santa .santa-hat-front-bg:nth-child(6) {
    left: 4rem;
}
.santa .santa-hat-front-bg:nth-child(7) {
    left: 4.666rem;
}
.santa .santa-hat-front-bg:nth-child(8) {
    left: 5.333rem;
}
.santa .santa-hat-front-bg:nth-child(9) {
    left: 6rem;
}
.santa .santa-hat-front-bg:nth-child(10) {
    left: 6.666rem;
}
.santa .santa-hat-front-bg:nth-child(11) {
    left: 7.333rem;
}
.santa .santa-hat-front-bg:nth-child(12) {
    left: 8rem;
}
.santa .santa-hat-front-bg:nth-child(13) {
    left: 8.666rem;
}
.santa .santa-hat-front-bg:nth-child(14) {
    left: 9.333rem;
}

.santa .santa-hat-front-side {
    position: absolute;
    left: -0.333rem;
    width: 10.666rem;
    height: 1rem;
    border-radius: 0.5rem;
    background: var(--santa-moustache);
}

.santa .santa-hat-front-side:nth-child(1) {
    top: 0.333rem;
}
.santa .santa-hat-front-side:nth-child(2) {
    top: 0.999rem;
}
.santa .santa-hat-front-side:nth-child(3) {
    top: 1.555rem;
}
.santa .santa-hat-front-side:nth-child(4) {
    top: 2.111rem;
}

.santa .santa-hat-pompom {
    position: absolute;
    top: 5.2rem;
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(1px 1px 0 var(--santa-border))
    drop-shadow(-1px 1px 0 var(--santa-border))
    drop-shadow(1px -1px 0 var(--santa-border))
    drop-shadow(-1px -1px 0 var(--santa-border));
}

.santa .santa-hat-pompom-bg {
    position: absolute;
    width: 0.5rem;
    height: 2rem;
    background-color: var(--santa-beard);
    border-radius: 0.25rem;
    transform-origin: center center;
}

.santa .santa-hat-pompom-bg:nth-child(2) {
    transform: rotate(30deg);
}
.santa .santa-hat-pompom-bg:nth-child(3) {
    transform: rotate(60deg);
}
.santa .santa-hat-pompom-bg:nth-child(4) {
    transform: rotate(90deg);
}
.santa .santa-hat-pompom-bg:nth-child(5) {
    transform: rotate(120deg);
}
.santa .santa-hat-pompom-bg:nth-child(6) {
    transform: rotate(150deg);
}

/**
 * Day 7 - candle with a flame
 * https://codepen.io/johnnyfekete/pen/ExgyPrb
 */
.candle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: #000000;
}

.candle {
    --candle-light: #e8eddf;
    --candle-dark: #e8c2ca;
    --candle-top: #d1b3c4;
    --candle-bottom: #b76935;
    --candle-string: #343434;
    --candle-flame: #ff9900;

    position: relative;
    width: 6rem;
    height: 12rem;
    transform: scale(0.35) translateY(-6rem);
}

@media only screen and (min-width: 576px) {
    .candle {
        transform: scale(0.45) translateY(-2rem);
    }
}

.candle .candle__body {
    width: 3rem;
    height: 8rem;
    position: absolute;
    z-index: 2;
    left: 1.5rem;
    bottom: 2rem;
    background: linear-gradient(
            to right,
            var(--candle-light) 0,
            var(--candle-dark) 100%
    );
}

.candle .candle__body::before {
    display: block;
    content: "";
    position: absolute;
    top: -1rem;
    width: 3rem;
    height: 2rem;
    border-radius: 50%;
    background: radial-gradient(
            circle at 50% 0,
            var(--candle-light) 0,
            var(--candle-top) 100%
    );
}

.candle .candle__body::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -1rem;
    width: 3rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(
            to right,
            var(--candle-light) 0,
            var(--candle-dark) 100%
    );
}

.candle .candle__wax-1 {
    position: absolute;
    z-index: 3;
    top: 3.5rem;
    left: 3rem;
    transform: scaleY(2);
}

.candle .candle__wax-2 {
    position: absolute;
    z-index: 1;
    top: 3rem;
    left: 4rem;
    transform: scaleY(2.5);
}

.candle .candle__wax-3 {
    position: absolute;
    z-index: 3;
    top: 2.8rem;
    left: 1rem;
    transform: scaleX(0.5);
}

.candle .candle__wax-1::after,
.candle .candle__wax-2::after,
.candle .candle__wax-3::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: var(--candle-top);
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    transform: rotate(45deg);
}

.candle .candle__bottom {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 6rem;
    height: 3rem;
    background-color: var(--candle-bottom);
    border-radius: 50%;
}

.candle-string {
    width: 0.2rem;
    height: 0.8rem;
    background-color: var(--candle-string);
    position: absolute;
    border-radius: 1rem;
    transform: rotate(5deg);
    top: 1.2rem;
    left: 3rem;
    z-index: 5;
}

.candle .candle__light {
    position: absolute;
    z-index: 4;
    top: -2rem;
    left: 1rem;
    width: 4rem;
    height: 4rem;
    margin-top: 120px;
    transform: translate(-66px, -250px) scale(0.33);
    mix-blend-mode: screen;
}

.candle .candle__flame {
    position: relative;
    width: 500px;
    height: 500px;
    background: var(--candle-flame);
    filter: blur(20px) contrast(10);
    mix-blend-mode: screen;
    border: 250px solid #000;
    border-bottom-color: transparent;
    border-radius: 40%;
    box-sizing: border-box;
    transform: scale(0.4, 1);
}

.candle .candle__flame-burn {
    position: absolute;
    top: 500px;
    left: 50px;
    width: 100px;
    height: 100px;
    background: black;
    border-radius: 100%;
    filter: blur(1em);
}

.candle .candle__flame-burn.burn-a:nth-child(0) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(1) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(2) {
    height: 5px;
}

.candle .candle__flame-burn.burn-a:nth-child(3) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(4) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(5) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(6) {
    height: 5px;
}

.candle .candle__flame-burn.burn-a:nth-child(7) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(8) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(9) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(10) {
    height: 9px;
}

.candle .candle__flame-burn.burn-a:nth-child(11) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(12) {
    height: 6px;
}

.candle .candle__flame-burn.burn-a:nth-child(13) {
    height: 9px;
}

.candle .candle__flame-burn.burn-a:nth-child(14) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(15) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(16) {
    height: 5px;
}

.candle .candle__flame-burn.burn-a:nth-child(17) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(18) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(19) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(20) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(21) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(22) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(23) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(24) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(25) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(26) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(27) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(28) {
    height: 9px;
}

.candle .candle__flame-burn.burn-a:nth-child(29) {
    height: 5px;
}

.candle .candle__flame-burn.burn-a:nth-child(30) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(31) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(32) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(33) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(34) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(35) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(36) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(37) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(38) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(39) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(40) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(41) {
    height: 6px;
}

.candle .candle__flame-burn.burn-a:nth-child(42) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(43) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(44) {
    height: 5px;
}

.candle .candle__flame-burn.burn-a:nth-child(45) {
    height: 9px;
}

.candle .candle__flame-burn.burn-a:nth-child(46) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(47) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(48) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(49) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(50) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(51) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(52) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(53) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(54) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(55) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(56) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(57) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(58) {
    height: 6px;
}

.candle .candle__flame-burn.burn-a:nth-child(59) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(60) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(61) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(62) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(63) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(64) {
    height: 2px;
}

.candle .candle__flame-burn.burn-a:nth-child(65) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(66) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(67) {
    height: 6px;
}

.candle .candle__flame-burn.burn-a:nth-child(68) {
    height: 6px;
}

.candle .candle__flame-burn.burn-a:nth-child(69) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(70) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(71) {
    height: 7px;
}

.candle .candle__flame-burn.burn-a:nth-child(72) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(73) {
    height: 3px;
}

.candle .candle__flame-burn.burn-a:nth-child(74) {
    height: 1px;
}

.candle .candle__flame-burn.burn-a:nth-child(75) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(76) {
    height: 4px;
}

.candle .candle__flame-burn.burn-a:nth-child(77) {
    height: 10px;
}

.candle .candle__flame-burn.burn-a:nth-child(78) {
    height: 8px;
}

.candle .candle__flame-burn.burn-a:nth-child(79) {
    height: 7px;
}

.candle .candle__flame-burn:nth-child(0) {
    height: 30px;
}

.candle .candle__flame-burn:nth-child(1) {
    height: 7px;
}

.candle .candle__flame-burn:nth-child(2) {
    height: 34px;
}

.candle .candle__flame-burn:nth-child(3) {
    height: 31px;
}

.candle .candle__flame-burn:nth-child(4) {
    height: 18px;
}

.candle .candle__flame-burn:nth-child(5) {
    height: 44px;
}

.candle .candle__flame-burn:nth-child(6) {
    height: 33px;
}

.candle .candle__flame-burn:nth-child(7) {
    height: 41px;
}

.candle .candle__flame-burn:nth-child(8) {
    height: 7px;
}

.candle .candle__flame-burn:nth-child(9) {
    height: 40px;
}

.candle .candle__flame-burn:nth-child(10) {
    height: 38px;
}

.candle .candle__flame-burn:nth-child(11) {
    height: 21px;
}

.candle .candle__flame-burn:nth-child(12) {
    height: 24px;
}

.candle .candle__flame-burn:nth-child(13) {
    height: 13px;
}

.candle .candle__flame-burn:nth-child(14) {
    height: 3px;
}

.candle .candle__flame-burn:nth-child(15) {
    height: 26px;
}

.candle .candle__flame-burn:nth-child(16) {
    height: 22px;
}

.candle .candle__flame-burn:nth-child(17) {
    height: 10px;
}

.candle .candle__flame-burn:nth-child(18) {
    height: 11px;
}

.candle .candle__flame-burn:nth-child(19) {
    height: 45px;
}

.candle .candle__flame-burn:nth-child(20) {
    height: 29px;
}

.candle .candle__flame-burn:nth-child(21) {
    height: 46px;
}

.candle .candle__flame-burn:nth-child(22) {
    height: 1px;
}

.candle .candle__flame-burn:nth-child(23) {
    height: 37px;
}

.candle .candle__flame-burn:nth-child(24) {
    height: 24px;
}

.candle .candle__flame-burn:nth-child(25) {
    height: 36px;
}

.candle .candle__flame-burn:nth-child(26) {
    height: 39px;
}

.candle .candle__flame-burn:nth-child(27) {
    height: 23px;
}

.candle .candle__flame-burn:nth-child(28) {
    height: 16px;
}

.candle .candle__flame-burn:nth-child(29) {
    height: 23px;
}

.candle .candle__flame-burn:nth-child(30) {
    height: 13px;
}

.candle .candle__flame-burn:nth-child(31) {
    height: 19px;
}

.candle .candle__flame-burn:nth-child(32) {
    height: 21px;
}

.candle .candle__flame-burn:nth-child(33) {
    height: 29px;
}

.candle .candle__flame-burn:nth-child(34) {
    height: 4px;
}

.candle .candle__flame-burn:nth-child(35) {
    height: 37px;
}

.candle .candle__flame-burn:nth-child(36) {
    height: 9px;
}

.candle .candle__flame-burn:nth-child(37) {
    height: 5px;
}

.candle .candle__flame-burn:nth-child(38) {
    height: 2px;
}

.candle .candle__flame-burn:nth-child(39) {
    height: 29px;
}

.candle .candle__flame-burn:nth-child(40) {
    height: 41px;
}

.candle .candle__flame-burn:nth-child(41) {
    height: 34px;
}

.candle .candle__flame-burn:nth-child(42) {
    height: 37px;
}

.candle .candle__flame-burn:nth-child(43) {
    height: 12px;
}

.candle .candle__flame-burn:nth-child(44) {
    height: 19px;
}

.candle .candle__flame-burn:nth-child(45) {
    height: 9px;
}

.candle .candle__flame-burn:nth-child(46) {
    height: 38px;
}

.candle .candle__flame-burn:nth-child(47) {
    height: 44px;
}

.candle .candle__flame-burn:nth-child(48) {
    height: 11px;
}

.candle .candle__flame-burn:nth-child(49) {
    height: 25px;
}

.candle .candle__flame-burn:nth-child(50) {
    height: 41px;
}

.candle .candle__flame-burn:nth-child(51) {
    height: 34px;
}

.candle .candle__flame-burn:nth-child(52) {
    height: 20px;
}

.candle .candle__flame-burn:nth-child(53) {
    height: 29px;
}

.candle .candle__flame-burn:nth-child(54) {
    height: 47px;
}

.candle .candle__flame-burn:nth-child(55) {
    height: 10px;
}

.candle .candle__flame-burn:nth-child(56) {
    height: 3px;
}

.candle .candle__flame-burn:nth-child(57) {
    height: 48px;
}

.candle .candle__flame-burn:nth-child(58) {
    height: 10px;
}

.candle .candle__flame-burn:nth-child(59) {
    height: 45px;
}

.candle .candle__flame-burn:nth-child(60) {
    height: 8px;
}

.candle .candle__flame-burn:nth-child(61) {
    height: 49px;
}

.candle .candle__flame-burn:nth-child(62) {
    height: 32px;
}

.candle .candle__flame-burn:nth-child(63) {
    height: 45px;
}

.candle .candle__flame-burn:nth-child(64) {
    height: 17px;
}

.candle .candle__flame-burn:nth-child(65) {
    height: 23px;
}

.candle .candle__flame-burn:nth-child(66) {
    height: 12px;
}

.candle .candle__flame-burn:nth-child(67) {
    height: 38px;
}

.candle .candle__flame-burn:nth-child(68) {
    height: 9px;
}

.candle .candle__flame-burn:nth-child(69) {
    height: 26px;
}

.candle .candle__flame-burn:nth-child(70) {
    height: 11px;
}

.candle .candle__flame-burn:nth-child(71) {
    height: 45px;
}

.candle .candle__flame-burn:nth-child(72) {
    height: 30px;
}

.candle .candle__flame-burn:nth-child(73) {
    height: 15px;
}

.candle .candle__flame-burn:nth-child(74) {
    height: 7px;
}

.candle .candle__flame-burn:nth-child(75) {
    height: 23px;
}

.candle .candle__flame-burn:nth-child(76) {
    height: 25px;
}

.candle .candle__flame-burn:nth-child(77) {
    height: 23px;
}

.candle .candle__flame-burn:nth-child(78) {
    height: 31px;
}

.candle .candle__flame-burn:nth-child(79) {
    height: 20px;
}

.candle .candle__flame-burn:nth-child(0) {
    margin-left: -49px;
}

.candle .candle__flame-burn:nth-child(1) {
    margin-left: -22px;
}

.candle .candle__flame-burn:nth-child(2) {
    margin-left: -188px;
}

.candle .candle__flame-burn:nth-child(3) {
    margin-left: -238px;
}

.candle .candle__flame-burn:nth-child(4) {
    margin-left: 29px;
}

.candle .candle__flame-burn:nth-child(5) {
    margin-left: -88px;
}

.candle .candle__flame-burn:nth-child(6) {
    margin-left: -137px;
}

.candle .candle__flame-burn:nth-child(7) {
    margin-left: -43px;
}

.candle .candle__flame-burn:nth-child(8) {
    margin-left: -244px;
}

.candle .candle__flame-burn:nth-child(9) {
    margin-left: -150px;
}

.candle .candle__flame-burn:nth-child(10) {
    margin-left: 78px;
}

.candle .candle__flame-burn:nth-child(11) {
    margin-left: 130px;
}

.candle .candle__flame-burn:nth-child(12) {
    margin-left: 155px;
}

.candle .candle__flame-burn:nth-child(13) {
    margin-left: -36px;
}

.candle .candle__flame-burn:nth-child(14) {
    margin-left: 230px;
}

.candle .candle__flame-burn:nth-child(15) {
    margin-left: 74px;
}

.candle .candle__flame-burn:nth-child(16) {
    margin-left: 31px;
}

.candle .candle__flame-burn:nth-child(17) {
    margin-left: -237px;
}

.candle .candle__flame-burn:nth-child(18) {
    margin-left: 154px;
}

.candle .candle__flame-burn:nth-child(19) {
    margin-left: -236px;
}

.candle .candle__flame-burn:nth-child(20) {
    margin-left: -168px;
}

.candle .candle__flame-burn:nth-child(21) {
    margin-left: -69px;
}

.candle .candle__flame-burn:nth-child(22) {
    margin-left: 70px;
}

.candle .candle__flame-burn:nth-child(23) {
    margin-left: 187px;
}

.candle .candle__flame-burn:nth-child(24) {
    margin-left: -78px;
}

.candle .candle__flame-burn:nth-child(25) {
    margin-left: -231px;
}

.candle .candle__flame-burn:nth-child(26) {
    margin-left: -20px;
}

.candle .candle__flame-burn:nth-child(27) {
    margin-left: -8px;
}

.candle .candle__flame-burn:nth-child(28) {
    margin-left: -234px;
}

.candle .candle__flame-burn:nth-child(29) {
    margin-left: -196px;
}

.candle .candle__flame-burn:nth-child(30) {
    margin-left: 69px;
}

.candle .candle__flame-burn:nth-child(31) {
    margin-left: 210px;
}

.candle .candle__flame-burn:nth-child(32) {
    margin-left: -45px;
}

.candle .candle__flame-burn:nth-child(33) {
    margin-left: 113px;
}

.candle .candle__flame-burn:nth-child(34) {
    margin-left: -240px;
}

.candle .candle__flame-burn:nth-child(35) {
    margin-left: -156px;
}

.candle .candle__flame-burn:nth-child(36) {
    margin-left: 22px;
}

.candle .candle__flame-burn:nth-child(37) {
    margin-left: 192px;
}

.candle .candle__flame-burn:nth-child(38) {
    margin-left: -148px;
}

.candle .candle__flame-burn:nth-child(39) {
    margin-left: 7px;
}

.candle .candle__flame-burn:nth-child(40) {
    margin-left: 92px;
}

.candle .candle__flame-burn:nth-child(41) {
    margin-left: -107px;
}

.candle .candle__flame-burn:nth-child(42) {
    margin-left: 83px;
}

.candle .candle__flame-burn:nth-child(43) {
    margin-left: 19px;
}

.candle .candle__flame-burn:nth-child(44) {
    margin-left: 14px;
}

.candle .candle__flame-burn:nth-child(45) {
    margin-left: 46px;
}

.candle .candle__flame-burn:nth-child(46) {
    margin-left: -145px;
}

.candle .candle__flame-burn:nth-child(47) {
    margin-left: 54px;
}

.candle .candle__flame-burn:nth-child(48) {
    margin-left: -209px;
}

.candle .candle__flame-burn:nth-child(49) {
    margin-left: 221px;
}

.candle .candle__flame-burn:nth-child(50) {
    margin-left: -107px;
}

.candle .candle__flame-burn:nth-child(51) {
    margin-left: -101px;
}

.candle .candle__flame-burn:nth-child(52) {
    margin-left: 10px;
}

.candle .candle__flame-burn:nth-child(53) {
    margin-left: -215px;
}

.candle .candle__flame-burn:nth-child(54) {
    margin-left: 39px;
}

.candle .candle__flame-burn:nth-child(55) {
    margin-left: -3px;
}

.candle .candle__flame-burn:nth-child(56) {
    margin-left: 21px;
}

.candle .candle__flame-burn:nth-child(57) {
    margin-left: -216px;
}

.candle .candle__flame-burn:nth-child(58) {
    margin-left: 132px;
}

.candle .candle__flame-burn:nth-child(59) {
    margin-left: 61px;
}

.candle .candle__flame-burn:nth-child(60) {
    margin-left: 17px;
}

.candle .candle__flame-burn:nth-child(61) {
    margin-left: -129px;
}

.candle .candle__flame-burn:nth-child(62) {
    margin-left: -231px;
}

.candle .candle__flame-burn:nth-child(63) {
    margin-left: 78px;
}

.candle .candle__flame-burn:nth-child(64) {
    margin-left: 219px;
}

.candle .candle__flame-burn:nth-child(65) {
    margin-left: 195px;
}

.candle .candle__flame-burn:nth-child(66) {
    margin-left: -15px;
}

.candle .candle__flame-burn:nth-child(67) {
    margin-left: -85px;
}

.candle .candle__flame-burn:nth-child(68) {
    margin-left: 60px;
}

.candle .candle__flame-burn:nth-child(69) {
    margin-left: -8px;
}

.candle .candle__flame-burn:nth-child(70) {
    margin-left: -146px;
}

.candle .candle__flame-burn:nth-child(71) {
    margin-left: 128px;
}

.candle .candle__flame-burn:nth-child(72) {
    margin-left: 18px;
}

.candle .candle__flame-burn:nth-child(73) {
    margin-left: 33px;
}

.candle .candle__flame-burn:nth-child(74) {
    margin-left: -193px;
}

.candle .candle__flame-burn:nth-child(75) {
    margin-left: 74px;
}

.candle .candle__flame-burn:nth-child(76) {
    margin-left: 210px;
}

.candle .candle__flame-burn:nth-child(77) {
    margin-left: -211px;
}

.candle .candle__flame-burn:nth-child(78) {
    margin-left: 247px;
}

.candle .candle__flame-burn:nth-child(79) {
    margin-left: -113px;
}

.candle .candle__flame-burn:nth-child(0) {
    -webkit-animation: burning 2832ms -3000ms infinite linear;
    animation: burning 2832ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(1) {
    -webkit-animation: burning 2158ms -3000ms infinite linear;
    animation: burning 2158ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(2) {
    -webkit-animation: burning 2133ms -3000ms infinite linear;
    animation: burning 2133ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(3) {
    -webkit-animation: burning 2873ms -3000ms infinite linear;
    animation: burning 2873ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(4) {
    -webkit-animation: burning 1394ms -3000ms infinite linear;
    animation: burning 1394ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(5) {
    -webkit-animation: burning 2969ms -3000ms infinite linear;
    animation: burning 2969ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(6) {
    -webkit-animation: burning 2225ms -3000ms infinite linear;
    animation: burning 2225ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(7) {
    -webkit-animation: burning 1025ms -3000ms infinite linear;
    animation: burning 1025ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(8) {
    -webkit-animation: burning 2588ms -3000ms infinite linear;
    animation: burning 2588ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(9) {
    -webkit-animation: burning 1603ms -3000ms infinite linear;
    animation: burning 1603ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(10) {
    -webkit-animation: burning 2294ms -3000ms infinite linear;
    animation: burning 2294ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(11) {
    -webkit-animation: burning 2400ms -3000ms infinite linear;
    animation: burning 2400ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(12) {
    -webkit-animation: burning 2217ms -3000ms infinite linear;
    animation: burning 2217ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(13) {
    -webkit-animation: burning 1316ms -3000ms infinite linear;
    animation: burning 1316ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(14) {
    -webkit-animation: burning 1142ms -3000ms infinite linear;
    animation: burning 1142ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(15) {
    -webkit-animation: burning 1103ms -3000ms infinite linear;
    animation: burning 1103ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(16) {
    -webkit-animation: burning 1268ms -3000ms infinite linear;
    animation: burning 1268ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(17) {
    -webkit-animation: burning 1009ms -3000ms infinite linear;
    animation: burning 1009ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(18) {
    -webkit-animation: burning 2948ms -3000ms infinite linear;
    animation: burning 2948ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(19) {
    -webkit-animation: burning 2103ms -3000ms infinite linear;
    animation: burning 2103ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(20) {
    -webkit-animation: burning 1769ms -3000ms infinite linear;
    animation: burning 1769ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(21) {
    -webkit-animation: burning 1220ms -3000ms infinite linear;
    animation: burning 1220ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(22) {
    -webkit-animation: burning 1355ms -3000ms infinite linear;
    animation: burning 1355ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(23) {
    -webkit-animation: burning 2268ms -3000ms infinite linear;
    animation: burning 2268ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(24) {
    -webkit-animation: burning 2120ms -3000ms infinite linear;
    animation: burning 2120ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(25) {
    -webkit-animation: burning 1346ms -3000ms infinite linear;
    animation: burning 1346ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(26) {
    -webkit-animation: burning 2650ms -3000ms infinite linear;
    animation: burning 2650ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(27) {
    -webkit-animation: burning 2655ms -3000ms infinite linear;
    animation: burning 2655ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(28) {
    -webkit-animation: burning 2663ms -3000ms infinite linear;
    animation: burning 2663ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(29) {
    -webkit-animation: burning 1849ms -3000ms infinite linear;
    animation: burning 1849ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(30) {
    -webkit-animation: burning 2888ms -3000ms infinite linear;
    animation: burning 2888ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(31) {
    -webkit-animation: burning 1755ms -3000ms infinite linear;
    animation: burning 1755ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(32) {
    -webkit-animation: burning 1138ms -3000ms infinite linear;
    animation: burning 1138ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(33) {
    -webkit-animation: burning 1567ms -3000ms infinite linear;
    animation: burning 1567ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(34) {
    -webkit-animation: burning 1600ms -3000ms infinite linear;
    animation: burning 1600ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(35) {
    -webkit-animation: burning 1467ms -3000ms infinite linear;
    animation: burning 1467ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(36) {
    -webkit-animation: burning 2686ms -3000ms infinite linear;
    animation: burning 2686ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(37) {
    -webkit-animation: burning 2380ms -3000ms infinite linear;
    animation: burning 2380ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(38) {
    -webkit-animation: burning 1005ms -3000ms infinite linear;
    animation: burning 1005ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(39) {
    -webkit-animation: burning 1610ms -3000ms infinite linear;
    animation: burning 1610ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(40) {
    -webkit-animation: burning 1134ms -3000ms infinite linear;
    animation: burning 1134ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(41) {
    -webkit-animation: burning 1161ms -3000ms infinite linear;
    animation: burning 1161ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(42) {
    -webkit-animation: burning 1790ms -3000ms infinite linear;
    animation: burning 1790ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(43) {
    -webkit-animation: burning 1219ms -3000ms infinite linear;
    animation: burning 1219ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(44) {
    -webkit-animation: burning 1693ms -3000ms infinite linear;
    animation: burning 1693ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(45) {
    -webkit-animation: burning 2412ms -3000ms infinite linear;
    animation: burning 2412ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(46) {
    -webkit-animation: burning 1140ms -3000ms infinite linear;
    animation: burning 1140ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(47) {
    -webkit-animation: burning 2604ms -3000ms infinite linear;
    animation: burning 2604ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(48) {
    -webkit-animation: burning 2307ms -3000ms infinite linear;
    animation: burning 2307ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(49) {
    -webkit-animation: burning 1627ms -3000ms infinite linear;
    animation: burning 1627ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(50) {
    -webkit-animation: burning 2490ms -3000ms infinite linear;
    animation: burning 2490ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(51) {
    -webkit-animation: burning 2122ms -3000ms infinite linear;
    animation: burning 2122ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(52) {
    -webkit-animation: burning 1612ms -3000ms infinite linear;
    animation: burning 1612ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(53) {
    -webkit-animation: burning 1326ms -3000ms infinite linear;
    animation: burning 1326ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(54) {
    -webkit-animation: burning 1416ms -3000ms infinite linear;
    animation: burning 1416ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(55) {
    -webkit-animation: burning 2002ms -3000ms infinite linear;
    animation: burning 2002ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(56) {
    -webkit-animation: burning 2241ms -3000ms infinite linear;
    animation: burning 2241ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(57) {
    -webkit-animation: burning 2068ms -3000ms infinite linear;
    animation: burning 2068ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(58) {
    -webkit-animation: burning 1079ms -3000ms infinite linear;
    animation: burning 1079ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(59) {
    -webkit-animation: burning 1493ms -3000ms infinite linear;
    animation: burning 1493ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(60) {
    -webkit-animation: burning 1822ms -3000ms infinite linear;
    animation: burning 1822ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(61) {
    -webkit-animation: burning 1317ms -3000ms infinite linear;
    animation: burning 1317ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(62) {
    -webkit-animation: burning 1644ms -3000ms infinite linear;
    animation: burning 1644ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(63) {
    -webkit-animation: burning 2634ms -3000ms infinite linear;
    animation: burning 2634ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(64) {
    -webkit-animation: burning 1527ms -3000ms infinite linear;
    animation: burning 1527ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(65) {
    -webkit-animation: burning 1393ms -3000ms infinite linear;
    animation: burning 1393ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(66) {
    -webkit-animation: burning 2391ms -3000ms infinite linear;
    animation: burning 2391ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(67) {
    -webkit-animation: burning 2513ms -3000ms infinite linear;
    animation: burning 2513ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(68) {
    -webkit-animation: burning 1142ms -3000ms infinite linear;
    animation: burning 1142ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(69) {
    -webkit-animation: burning 1095ms -3000ms infinite linear;
    animation: burning 1095ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(70) {
    -webkit-animation: burning 1684ms -3000ms infinite linear;
    animation: burning 1684ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(71) {
    -webkit-animation: burning 1095ms -3000ms infinite linear;
    animation: burning 1095ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(72) {
    -webkit-animation: burning 1282ms -3000ms infinite linear;
    animation: burning 1282ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(73) {
    -webkit-animation: burning 1567ms -3000ms infinite linear;
    animation: burning 1567ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(74) {
    -webkit-animation: burning 1855ms -3000ms infinite linear;
    animation: burning 1855ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(75) {
    -webkit-animation: burning 2786ms -3000ms infinite linear;
    animation: burning 2786ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(76) {
    -webkit-animation: burning 1138ms -3000ms infinite linear;
    animation: burning 1138ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(77) {
    -webkit-animation: burning 2428ms -3000ms infinite linear;
    animation: burning 2428ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(78) {
    -webkit-animation: burning 1436ms -3000ms infinite linear;
    animation: burning 1436ms -3000ms infinite linear;
}

.candle .candle__flame-burn:nth-child(79) {
    -webkit-animation: burning 1011ms -3000ms infinite linear;
    animation: burning 1011ms -3000ms infinite linear;
}

@-webkit-keyframes burning {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-600px);
    }
}

@keyframes burning {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-600px);
    }
}

/**
 * Day 8 - candycane
 * https://codepen.io/johnnyfekete/pen/KKgMLym
 */
.candycane-container {
    --candycane-background: #fff;
    --candycane-red: #ff0054;
    --candycane-white: #ffffff;


    margin: 0;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.candycane {
    display: block;
    position: relative;
    width: 6rem;
    height: 12rem;
    background: repeating-linear-gradient(
            40deg,
            var(--candycane-white),
            var(--candycane-white) 1rem,
            var(--candycane-red) 1.1rem,
            var(--candycane-red) 2rem,
            var(--candycane-white) 2.1rem
    );
    border-radius: 3rem 3rem 0 0;
    transform: scale(0.35) translateY(-7rem) translateX(0rem);
}

@media only screen and (min-width: 576px) {
    .candycane {
        transform: scale(0.5) translateY(-3rem) translateX(2rem);
    }
}

.candycane::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 2rem;
    height: 3rem;
    background-color: var(--candycane-background);
    border-radius: 1rem 1rem 0 0;
}

.candycane::after {
    content: "";
    position: absolute;
    top: 5rem;
    left: 0;
    width: 4rem;
    height: 7rem;
    background-color: var(--candycane-background);
}

.candycane .candycane__end {
    position: absolute;
    width: 2rem;
    height: 1rem;
    background: yellow;
    overflow: hidden;
    background: radial-gradient(
            circle at 50% 0%,
            transparent 69%,
            var(--candycane-background) 70%
    );
    background-size: 100% 100%;
}

.candycane .candycane__end--top {
    left: 0;
    top: 4rem;
}

.candycane .candycane__end--bottom {
    left: 4rem;
    top: 11rem;
}

/**
 * Day 9 - hot chocolate with marshmallows
 * https://codepen.io/johnnyfekete/pen/VwKKMKE
 */
.hot-chocolate-container {
    background-color: #aa78a6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.hot-chocolate {
    --mug-dark: #727d71;
    --mug-light: #abc4ab;
    --mug-coffee: #6c584c;
    --marshmallow: #d7fdf0;
    --pink-marshmallow: #ffe4e2;

    perspective: 400px;
    transform: translateX(3rem) translateY(2rem);
}

@media only screen and (min-width: 576px) {
    .hot-chocolate {
        transform: scale(0.4);
    }
}

.hot-chocolate .mug {
    width: 10rem;
    height: 10rem;
    transform: rotateX(-30deg);
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.1));
}

.hot-chocolate .mug__contents {
    width: 10rem;
    height: 10rem;
    background-color: var(--mug-dark);
    position: relative;
}

.hot-chocolate .mug__contents::before {
    content: "";
    display: block;
    width: 10rem;
    height: 3rem;
    position: absolute;
    top: 8.5rem;
    background-color: var(--mug-dark);
    border-radius: 50%;
}

.hot-chocolate .mug__contents::after {
    content: "";
    display: block;
    width: 10rem;
    height: 3rem;
    position: absolute;
    z-index: 3;
    top: -1.5rem;
    background-color: var(--mug-coffee);
    border-radius: 50%;
    box-sizing: border-box;
    border: 0.25rem solid var(--mug-light);
}

.hot-chocolate .mug__grip {
    position: absolute;
    z-index: -1;
    right: -2rem;
    width: 4rem;
    height: 6rem;
    border: 0.75rem solid var(--mug-light);
    border-bottom-width: 1rem;
    border-radius: 2rem 1rem / 4rem 2rem;
}

.hot-chocolate .mug__background {
    position: absolute;
    width: 10rem;
    height: 4rem;
    background-color: var(--mug-light);
    display: flex;
}

.hot-chocolate .mug__background-curve {
    background-color: var(--mug-light);
    width: calc(10rem / 7);
    height: calc(10rem / 7);
    border-radius: 50%;
    margin-top: calc(4rem - 10rem / 14);
}

.hot-chocolate .mug__background-curve:nth-child(1),
.hot-chocolate .mug__background-curve:nth-child(3),
.hot-chocolate .mug__background-curve:nth-child(5),
.hot-chocolate .mug__background-curve:nth-child(7) {
    background-color: var(--mug-dark);
}

.hot-chocolate .mug__shine {
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 33%,
            rgba(255, 255, 255, 0) 100%
    );
}

.hot-chocolate .mug__shine--bottom {
    position: absolute;
    z-index: 2;
    top: 10rem;
    width: 10rem;
    height: 1.5rem;
    overflow: hidden;
}

.hot-chocolate .mug__shine--bottom::before {
    content: "";
    display: block;
    width: 10rem;
    height: 3rem;
    position: absolute;
    top: -1.5rem;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 33%,
            rgba(255, 255, 255, 0) 100%
    );
    border-radius: 50%;
}

.hot-chocolate .marshmallow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 2.4rem;
    height: 1.6rem;
    border-radius: 0.8rem / 1.2rem;
    background: radial-gradient(
            circle at 0 0,
            var(--marshmallow) 0%,
            #ffffff 100%
    );
    box-shadow: 2px 2px 0 2px rgba(0, 0, 0, 0.3);
}

.hot-chocolate .marshmallow:nth-child(odd) {
    background: radial-gradient(
            circle at 0 0,
            var(--pink-marshmallow) 0%,
            #ffffff 100%
    );
}

.hot-chocolate .marshmallow:nth-child(4) {
    transform: scale(0.7) translateX(10.5rem) translateY(-1.8rem) rotate(24deg);
}

.hot-chocolate .marshmallow:nth-child(9) {
    transform: scale(0.6) translateX(9.5rem) translateY(-1rem) rotate(-5deg);
}

.hot-chocolate .marshmallow:nth-child(8) {
    transform: scale(0.65) translateX(6rem) translateY(-0.5rem) rotate(20deg);
}

.hot-chocolate .marshmallow:nth-child(7) {
    transform: scale(0.7) translateX(7.5rem) translateY(-2.6rem) rotate(-30deg);
}

.hot-chocolate .marshmallow:nth-child(6) {
    transform: scale(0.5) translateX(4.5rem) translateY(-3.5rem) rotate(-8deg);
}

.hot-chocolate .marshmallow:nth-child(5) {
    transform: scale(0.5) translateX(7rem) translateY(-3.5rem) rotate(55deg);
}

.hot-chocolate .marshmallow:nth-child(3) {
    transform: scale(0.6) translateX(1.7rem) translateY(-1rem) rotate(10deg);
}

.hot-chocolate .marshmallow:nth-child(1) {
    transform: scale(0.6) translateX(4rem) translateY(-1rem) rotate(-35deg);
}

.hot-chocolate .marshmallow:nth-child(2) {
    transform: scale(0.65) translateX(0.5rem) translateY(-2.5rem) rotate(-25deg);
}

/**
 * Day 10 - snowman made of letters and characters
 * https://codepen.io/johnnyfekete/pen/OJRbWJM
 */
.snowman-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #ffcdb2 40%, #f08080 100%);
    margin: 0;
}

.snowman {
    --snowman: #ffffff;
    --snowman-button: #03071e;
    --snowman-nose: #f72585;
    --snowman-arm: #6d597a;

    font-family: "Verdana", sans-serif;
    width: 10rem;
    height: 21rem;
    position: relative;
    transform: scale(0.32) translateX(-2rem) translateY(-23rem);
}

@media only screen and (min-width: 576px) {
    .snowman {
        transform: scale(0.38) translateX(-1rem) translateY(-16.3rem);
    }
}

.snowman .snowman__leg {
    color: var(--snowman);
    font-size: 12rem;
    position: absolute;
    bottom: -1rem;
    left: 0.8rem;
    line-height: 11rem;
    transform: rotate(75deg);
    text-shadow: 1px -1px 2px rgba(0, 0, 0, 0.2);
}

.snowman .snowman__stomach {
    color: var(--snowman);
    font-size: 8rem;
    position: absolute;
    bottom: 7.4rem;
    left: 1.5rem;
    line-height: 7rem;
    transform: rotate(-85deg);
    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2);
}

.snowman .snowman__head {
    color: var(--snowman);
    font-size: 6rem;
    position: absolute;
    bottom: 11.7rem;
    left: 2.5rem;
    transform: rotate(-95deg);
    text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
}

.snowman .snowman__button {
    color: var(--snowman-button);
    font-weight: 900;
    position: absolute;
}

.snowman .snowman__button-1 {
    font-size: 1.2rem;
    bottom: 4.3rem;
    left: 4.5rem;
    transform: rotate(-60deg);
    text-shadow: -2px 1px 4px;
}

.snowman .snowman__button-2 {
    font-size: 1.2rem;
    bottom: 6.6rem;
    left: 4.6rem;
    transform: rotate(120deg);
    text-shadow: -2px -2px 4px;
}

.snowman .snowman__button-3 {
    font-size: 1.1rem;
    bottom: 9rem;
    left: 4.6rem;
    transform: rotate(120deg);
    text-shadow: 1px -2px 4px;
}

.snowman .snowman__button-4 {
    font-size: 1rem;
    bottom: 11rem;
    left: 4.5rem;
    transform: rotate(120deg);
    text-shadow: 1px -2px 4px;
}

.snowman .snowman__nose {
    position: absolute;
    color: var(--snowman-nose);
    left: 4rem;
    bottom: 13.3rem;
    font-size: 1.6rem;
    transform: rotate(20deg) scaleX(1) scaleY(2);
    text-shadow: 1px 1px 2px;
}

.snowman .snowman__left-eye {
    position: absolute;
    left: 3.6rem;
    bottom: 15.2rem;
    font-weight: 900;
    color: var(--snowman-button);
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px;
}

.snowman .snowman__right-eye {
    position: absolute;
    left: 5.4rem;
    bottom: 15.3rem;
    font-weight: 900;
    color: var(--snowman-button);
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transform: rotate(20deg);
}

.snowman .snowman__left-arm {
    position: absolute;
    font-size: 3rem;
    bottom: 8.5rem;
    left: -0.7rem;
    color: var(--snowman-arm);
    transform: rotate(-120deg) scaleY(2);
}

.snowman .snowman__right-arm {
    position: absolute;
    font-size: 3rem;
    bottom: 8rem;
    left: 8.5rem;
    color: var(--snowman-arm);
    transform: rotate(120deg) scaleY(2);
}

.snowman .snowman__hat {
    position: absolute;
    font-weight: 900;
    color: var(--snowman-button);
    bottom: 16.6rem;
    left: 2.4rem;
    width: 5rem;
    height: 4rem;
    transform: rotate(10deg);
}

.snowman .snowman__hat--base {
    position: absolute;
    font-size: 3.5rem;
    left: 1.5rem;
}

.snowman .snowman__hat--left {
    position: absolute;
    font-size: 2.4rem;
    top: 1.5rem;
    transform: rotate(-90deg);
}

.snowman .snowman__hat--right {
    position: absolute;
    font-size: 2.4rem;
    left: 4.9rem;
    top: 1.5rem;
    transform: rotate(90deg);
}

/**
 * Day 11 - flickering Christmas lights
 * https://codepen.io/johnnyfekete/pen/NWRdKjQ
 */
.christmas-lights-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    margin: 0;
    position: relative;
}

.christmas-lights {
    --christmas-lights-size: 90rem;
    --christmas-lights-chord: #6b705c;
    --christmas-lights-holder: #ced4da;
    --christmas-lights-bulb-1: #f94144;
    --christmas-lights-bulb-2: #90be6d;
    --christmas-lights-bulb-3: #f9c74f;
    --christmas-lights-bulb-4: #43aa8b;
    --christmas-lights-bulb-5: #58b4d1;

    height: 6rem;
    transform: scale(0.1);
}

@media only screen and (min-width: 576px) {
    .christmas-lights {
        transform: scale(0.13) translateY(2rem);
    }
}

.christmas-lights .chord {
    width: var(--christmas-lights-size);
    height: 100%;
    overflow: hidden;
    position: relative;
}

.christmas-lights .chord::before {
    content: "";
    position: absolute;
    display: block;
    width: calc(var(--christmas-lights-size) * 3);
    height: calc(var(--christmas-lights-size) * 3);
    left: calc(var(--christmas-lights-size) * -1);
    bottom: 0;
    border-bottom: 2px solid var(--christmas-lights-chord);
    border-radius: 50%;
}

.christmas-lights .bulb {
    position: absolute;
    z-index: 1;
    width: 4rem;
    height: 8rem;
    background-color: red;
    border-radius: 50% 50% 50% 50% / 30% 30% 60% 60%;
    margin-top: 1rem;
    left: calc(50% - 2rem);
}

.christmas-lights .bulb::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -10;
    width: 1.5rem;
    height: 1.1rem;
    background-color: var(--christmas-lights-holder);
    border-radius: 0.25rem 0.25rem 0.25rem;
    top: -0.9rem;
    left: 1.25rem;
}

.christmas-lights .bulb::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 1rem;
    height: 1.8rem;
    background-color: white;
    border-radius: 50%;
    top: 0.5rem;
    left: 0.5rem;
    transform: rotate(30deg);
    opacity: 0.5;
}

.christmas-lights .bulb .light {
    position: absolute;
    top: -0.2rem;
    left: -3rem;
    z-index: -2;
    width: 10rem;
    height: 10rem;
    background-color: white;
    border-radius: 50%;
    opacity: 0.2;
    -webkit-animation: bulb-flicker-animation 1s infinite;
    animation: bulb-flicker-animation 1s infinite;
}

.christmas-lights .bulb.bulb-1 {
    transform: rotate(12deg);
    background-color: var(--christmas-lights-bulb-1);
    margin-left: -24rem;
    margin-top: -1.2rem;
}

.christmas-lights .bulb.bulb-1 .light {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.christmas-lights .bulb.bulb-2 {
    transform: rotate(6deg);
    background-color: var(--christmas-lights-bulb-2);
    margin-left: -12rem;
    margin-top: 0.35rem;
}

.christmas-lights .bulb.bulb-2 .light {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.christmas-lights .bulb.bulb-3 {
    background-color: var(--christmas-lights-bulb-3);
}

.christmas-lights .bulb.bulb-4 {
    transform: rotate(-6deg);
    background-color: var(--christmas-lights-bulb-4);
    margin-left: 12rem;
    margin-top: 0.35rem;
    -webkit-animation: broken-bulb-animation 1s infinite;
    animation: broken-bulb-animation 1s infinite;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.christmas-lights .bulb.bulb-4 .light {
    -webkit-animation: broken-bulb-flicker-animation 1s infinite;
    animation: broken-bulb-flicker-animation 1s infinite;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.christmas-lights .bulb.bulb-5 {
    transform: rotate(-12deg);
    background-color: var(--christmas-lights-bulb-5);
    margin-left: 24rem;
    margin-top: -1.2rem;
}

.christmas-lights .bulb.bulb-5 .light {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes bulb-flicker-animation {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.09;
    }
    30% {
        opacity: 0.1;
    }
    40% {
        opacity: 0.08;
    }
    50% {
        opacity: 0.1;
    }
    60% {
        opacity: 0.11;
    }
    70% {
        opacity: 0.11;
    }
    80% {
        opacity: 0.09;
    }
    90% {
        opacity: 0.12;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes bulb-flicker-animation {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.09;
    }
    30% {
        opacity: 0.1;
    }
    40% {
        opacity: 0.08;
    }
    50% {
        opacity: 0.1;
    }
    60% {
        opacity: 0.11;
    }
    70% {
        opacity: 0.11;
    }
    80% {
        opacity: 0.09;
    }
    90% {
        opacity: 0.12;
    }
    100% {
        opacity: 0.1;
    }
}

@-webkit-keyframes broken-bulb-animation {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0.4;
    }
    40% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.4;
    }
    60% {
        opacity: 1;
    }
}

@keyframes broken-bulb-animation {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0.4;
    }
    40% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.4;
    }
    60% {
        opacity: 1;
    }
}

@-webkit-keyframes broken-bulb-flicker-animation {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.09;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 0.02;
    }
    50% {
        opacity: 0;
    }
    60% {
        opacity: 0.11;
    }
    70% {
        opacity: 0.11;
    }
    80% {
        opacity: 0.09;
    }
    90% {
        opacity: 0.12;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes broken-bulb-flicker-animation {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.09;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 0.02;
    }
    50% {
        opacity: 0;
    }
    60% {
        opacity: 0.11;
    }
    70% {
        opacity: 0.11;
    }
    80% {
        opacity: 0.09;
    }
    90% {
        opacity: 0.12;
    }
    100% {
        opacity: 0.1;
    }
}

/**
 * Day 12 - polar bear
 * https://codepen.io/johnnyfekete/pen/qBaRZXV
 */
.polar-bear-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    background-color: #000;
}

.polar-bear {
    --polar-bear: #ffffff;
    --polar-bear-highlight: #bfcde0;
    --polar-bear-face: #1e2019;
    --polar-bear-scarf: #ce4257;
    --polar-bear-scarf-end: #bd3146;
    --polar-bear-scarf-dark: #720026;

    width: 20rem;
    height: 20rem;
    position: relative;
    transform: scale(0.27) translateX(-7rem);
}

@media only screen and (min-width: 576px) {
    .polar-bear {
        transform: scale(0.35) translateX(-6rem);
    }
}

.polar-bear .polar-bear__body {
    position: absolute;
    top: 6rem;
    left: 3rem;
    width: 14rem;
    height: 14rem;
    background-color: var(--polar-bear);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.polar-bear .polar-bear__foot {
    position: absolute;
    background-color: var(--polar-bear);
    bottom: 0;
    width: 3.8rem;
    height: 4.6rem;
    border-top: 0.3rem solid var(--polar-bear-highlight);
    border-radius: 50%;
}

.polar-bear .polar-bear__print {
    position: absolute;
    bottom: 1rem;
    left: 0.8rem;
    width: 2.2rem;
    height: 1.8rem;
    background-color: var(--polar-bear-highlight);
    border-radius: 50% 50% 50% 50% / 60% 60% 50% 50%;
}

.polar-bear .polar-bear__fingers {
    position: absolute;
    bottom: 3.2rem;
    left: 1.45rem;
    width: 0.7rem;
    height: 0.9rem;
    background-color: var(--polar-bear-highlight);
    border-radius: 50%;
}

.polar-bear .polar-bear__fingers::before {
    content: "";
    display: block;
    position: absolute;
    left: -0.9rem;
    top: 0.4rem;
    width: 0.6rem;
    height: 0.8rem;
    background-color: var(--polar-bear-highlight);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.polar-bear .polar-bear__fingers::after {
    content: "";
    display: block;
    position: absolute;
    left: 1rem;
    top: 0.4rem;
    width: 0.6rem;
    height: 0.8rem;
    background-color: var(--polar-bear-highlight);
    border-radius: 50%;
    transform: rotate(20deg);
}

.polar-bear .polar-bear__foot.polar-bear__foot--left {
    transform: rotate(-10deg);
}

.polar-bear .polar-bear__foot.polar-bear__foot--right {
    left: 10rem;
    transform: rotate(10deg);
}

.polar-bear__arm--left {
    position: absolute;
    width: 3rem;
    height: 4rem;
    background-color: var(--polar-bear);
    top: 4.5rem;
    left: -0.2rem;
    box-sizing: border-box;
    border-bottom: 0.3rem solid var(--polar-bear-highlight);
    border-radius: 0 0 50% 50% / 0 0 100% 30%;
    transform: rotate(30deg);
}

.polar-bear__arm--right {
    position: absolute;
    width: 3rem;
    height: 4rem;
    background-color: var(--polar-bear);
    top: 4.5rem;
    right: -0.2rem;
    box-sizing: border-box;
    border-bottom: 0.3rem solid var(--polar-bear-highlight);
    border-radius: 0 0 50% 50% / 0 0 30% 100%;
    transform: rotate(-30deg);
}

.polar-bear .polar-bear__head {
    position: absolute;
    z-index: 2;
    width: 10rem;
    height: 10rem;
    left: 5rem;
}

.polar-bear .polar-bear__face {
    position: absolute;
    width: 10rem;
    height: 10rem;
    background-color: var(--polar-bear);
    border-radius: 50%;
}

.polar-bear .polar-bear__ear {
    position: absolute;
    z-index: -1;
    width: 4rem;
    height: 4rem;
    background-color: var(--polar-bear);
    border-radius: 50%;
}

.polar-bear .polar-bear__ear::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 0.8rem;
    top: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    background-color: var(--polar-bear-highlight);
    border-radius: 50%;
}

.polar-bear .polar-bear__ear--left {
    left: -1.2rem;
}

.polar-bear .polar-bear__ear--right {
    left: 7.2rem;
}

.polar-bear .polar-bear__eye {
    position: absolute;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 0.5rem solid var(--polar-bear-face);
    transform: scaleY(0.9);
}
.polar-bear .polar-bear__eye::after {
    position: absolute;
    content: "";
    display: block;
    bottom: -0.5rem;
    left: -0.5rem;
    width: 2.2rem;
    height: 1rem;
    background: radial-gradient(
            circle at 0.25rem 0.03rem,
            var(--polar-bear-face) 0.25rem,
            transparent 0.25rem
    ),
    radial-gradient(
            circle at 1.75rem 0.03rem,
            var(--polar-bear-face) 0.25rem,
            var(--polar-bear) 0.25rem
    );
}

.polar-bear .polar-bear__eye.polar-bear__eye--left {
    top: 4rem;
    left: 1.7rem;
}

.polar-bear .polar-bear__eye.polar-bear__eye--right {
    top: 4rem;
    right: 1.7rem;
}

.polar-bear .polar-bear__lip {
    position: absolute;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 0.5rem solid var(--polar-bear-face);
    transform: scaleY(0.9);
}
.polar-bear .polar-bear__lip::after {
    position: absolute;
    content: "";
    display: block;
    top: -0.5rem;
    left: -0.5rem;
    width: 2.2rem;
    height: 1rem;
    background: radial-gradient(
            circle at 0.25rem 0.97rem,
            var(--polar-bear-face) 0.25rem,
            transparent 0.25rem
    ),
    radial-gradient(
            circle at 1.75rem 0.97rem,
            var(--polar-bear-face) 0.25rem,
            var(--polar-bear) 0.25rem
    );
}

.polar-bear .polar-bear__lip.polar-bear__lip--left {
    top: 6rem;
    left: 3.25rem;
}

.polar-bear .polar-bear__lip.polar-bear__lip--right {
    top: 6rem;
    right: 3.25rem;
}

.polar-bear .polar-bear__nose {
    position: absolute;
    width: 1.8rem;
    height: 1.2rem;
    background-color: var(--polar-bear-face);
    border-radius: 50%;
    top: 5.5rem;
    left: 4.1rem;
}

.polar-bear .polar-bear__nose::after {
    position: absolute;
    content: "";
    display: block;
    top: 0.5rem;
    left: 0.65rem;
    width: 0.5rem;
    height: 1.2rem;
    background-color: var(--polar-bear-face);
}

.polar-bear__scarf {
    position: absolute;
    top: 4rem;
    left: -0.5rem;
    width: 11rem;
    height: 8rem;
    border-radius: 50%;
}

.polar-bear__scarf::after {
    content: "";
    display: block;
    position: absolute;
    width: 9.8rem;
    height: 6rem;
    background-color: var(--polar-bear);
    border-radius: 50%;
    left: 0.6rem;
    top: -1rem;
}

.polar-bear__scarf-line {
    position: absolute;
    top: 4rem;
    left: -0.5rem;
    width: 11rem;
    height: 8rem;
    border-radius: 50%;
    background-color: var(--polar-bear-scarf);
    overflow: hidden;
}

.polar-bear .polar-bear__scarf-line::after {
    content: "";
    display: block;
    position: absolute;
    width: 14rem;
    height: 8rem;
    border-radius: 50%;
    top: -1rem;
    left: 1rem;
    border: 0.4rem solid var(--polar-bear-scarf-dark);
}

.polar-bear__scarf-end--left {
    position: absolute;
    z-index: -1;
    top: 11rem;
    left: 1.5rem;
    background-color: var(--polar-bear-scarf-end);
    width: 3rem;
    height: 3rem;
    border-radius: 0 0 0.5rem 0.5rem;
    transform: rotate(20deg);
}

.polar-bear__scarf-end--right {
    position: absolute;
    z-index: -1;
    top: 11rem;
    left: 5.5rem;
    background-color: var(--polar-bear-scarf-end);
    width: 3rem;
    height: 2.2rem;
    border-radius: 0 0 0.5rem 0.5rem;
    transform: rotate(-20deg);
}

/**
 * Day 13 - elf hat
 * https://codepen.io/johnnyfekete/pen/JjREvyo
 */
.elf-hat-container {
    --elf-hat-background: #000;
    --elf-hat-red: #bf0603;
    --elf-hat-red-shadow: #8d0801;
    --elf-hat-gold: #fec601;
    --elf-hat-green: #7cb518;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    background: var(--elf-hat-background);
}

.elf-hat {
    width: 12rem;
    height: 10rem;
    position: relative;
    transform: scale(0.42) translateX(-2.9rem);
}

@media only screen and (min-width: 576px) {
    .elf-hat {
        transform: scale(0.6) translateX(-1.5rem);
    }
}

.elf-hat .elf-hat__main {
    width: 9rem;
    height: 10rem;
    overflow: hidden;
    position: absolute;
    left: 1.5rem;
}

.elf-hat .elf-hat__main::before {
    content: "";
    display: block;
    width: 12rem;
    height: 20rem;
    background: var(--elf-hat-red);
    border-radius: 50% 50% 50% 50% / 80% 20% 50% 0;
}

.elf-hat .elf-hat__main::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0.7rem;
    left: 8rem;
    width: 4rem;
    height: 12rem;
    background-color: var(--elf-hat-background);
    border-radius: 50% 50% 20% 50% / 10% 10% 50% 0%;
    transform: rotate(-20deg);
}

.elf-hat .elf-hat__main-shadow {
    position: absolute;
    top: 2.4rem;
    left: 6.2rem;
    z-index: 3;
    width: 2rem;
    height: 0.6rem;
    background: var(--elf-hat-red-shadow);
    border-radius: 0.4rem;
    transform: rotate(-10deg);
}

.elf-hat .elf-hat__side {
    position: absolute;
    z-index: 4;
    top: 6.5rem;
    left: 0;
}

.elf-hat .elf-hat__side::after {
    content: "";
    display: block;
    width: 9rem;
    height: 1rem;
    background-color: var(--elf-hat-green);
    position: absolute;
    top: 3rem;
    left: 1.5rem;
    border-radius: 0 0 50% 50%;
}

.elf-hat .elf-hat__side__left {
    position: absolute;
    width: 4rem;
    height: 3.5rem;
    overflow: hidden;
}

.elf-hat .elf-hat__side__left::before {
    position: absolute;
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    margin-left: -4rem;
    border-radius: 50%;
    background-color: var(--elf-hat-green);
}

.elf-hat .elf-hat__side__left::after {
    position: absolute;
    z-index: 2;
    content: "";
    display: block;
    width: 3rem;
    height: 6rem;
    margin-left: -1.5rem;
    border-radius: 50% 50% 0 0;
    background-color: var(--elf-hat-background);
}

.elf-hat .elf-hat__side__right {
    position: absolute;
    width: 4rem;
    height: 3.5rem;
    left: 8rem;
    overflow: hidden;
}

.elf-hat .elf-hat__side__right::before {
    position: absolute;
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: var(--elf-hat-green);
}

.elf-hat .elf-hat__side__right::after {
    position: absolute;
    z-index: 2;
    content: "";
    display: block;
    width: 3rem;
    height: 6rem;
    margin-left: 2.5rem;
    border-radius: 50% 50% 0 0;
    background-color: var(--elf-hat-background);
}

.elf-hat .elf-hat__side__spikes {
    position: absolute;
    width: 8rem;
    height: 4.5rem;
    top: -1rem;
    left: 2rem;
    overflow: hidden;
}

.elf-hat .elf-hat__side__spikes::before,
.elf-hat .elf-hat__side__spikes::after {
    content: "";
    display: block;
    position: absolute;
    top: 1.5rem;
    width: 5rem;
    height: 5rem;
    background-color: var(--elf-hat-green);
    transform: scaleX(0.7) rotate(45deg);
}

.elf-hat .elf-hat__side__spikes::after {
    left: 3rem;
    top: 2rem;
}

.elf-hat .elf-hat__gold {
    position: absolute;
    z-index: 5;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--elf-hat-gold);
}

.elf-hat .elf-hat__gold.elf-hat__gold--main {
    left: 10rem;
}

.elf-hat .elf-hat__gold.elf-hat__gold--left {
    left: -0.3rem;
    top: 5.8rem;
}

.elf-hat .elf-hat__gold.elf-hat__gold--left-center {
    left: 3.75rem;
    top: 5.1rem;
}

.elf-hat .elf-hat__gold.elf-hat__gold--right-center {
    left: 6.75rem;
    top: 5.6em;
}

.elf-hat .elf-hat__gold.elf-hat__gold--right {
    left: 10.7rem;
    top: 5.8rem;
}

/**
 * Day 14 - Christmas tree branch with ornaments
 * https://codepen.io/johnnyfekete/pen/qBarZVj
 */
.ornaments-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
            circle at 100%,
            #6930c3 0%,
            #56cfe1 40%,
            #72efdd 70%,
            #80ffdb 100%
    );
    height: 100%;
    margin: 0;
}

.ornaments {
    --ornaments-branch: #9d6b53;
    --ornaments-branch-light: #cd9777;
    --ornament-1: #f83b17;
    --ornament-1-light: #fb8f7a;
    --ornament-2: #02c39a;
    --ornament-2-light: #50fdd8;
    --ornament-3: #c77dff;
    --ornament-3-light: #e0aaff;

    position: relative;
    width: 40rem;
    height: 24rem;
    transform: scale(0.15) translateX(-16rem);
}

@media only screen and (min-width: 576px) {
    .ornaments {
        transform: scale(0.2) translateX(-15rem);
    }
}

.ornaments .branch {
    position: absolute;
    width: 20rem;
    height: 0.3rem;
    top: 4rem;
    border-radius: 0 50% 50% 0;
    background-color: var(--ornaments-branch);
}

.ornaments .branch.branch-1 {
    transform: rotate(-10deg);
    top: 7rem;
}

.branch.branch-2 {
    transform: rotate(-6deg);
    top: 11rem;
    left: 12rem;
}

.ornaments .branch::before {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -0.15rem;
    left: -0.1rem;
    width: 0.8rem;
    height: 0.6rem;
    background-color: var(--ornaments-branch);
}

.ornaments .spikes-upper {
    position: absolute;
    top: -4rem;
    left: 4rem;
    width: 17rem;
    height: 4rem;
    background: repeating-linear-gradient(
            to right,
            #006600,
            #006600 0.2rem,
            transparent 0.2rem,
            transparent 0.7rem
    );
    transform: skewX(-45deg);
}
.ornaments .spikes-lower {
    position: absolute;
    top: 0.3rem;
    left: 4rem;
    width: 17rem;
    height: 4rem;
    background: repeating-linear-gradient(
            to right,
            #006600,
            #006600 0.2rem,
            transparent 0.2rem,
            transparent 0.7rem
    );
    transform: skewX(45deg);
}

.ornaments .spikes-end {
    position: absolute;
    top: -3rem;
    left: 20.6rem;
    width: 6.3rem;
    height: 6.3rem;
    overflow: hidden;
    transform: rotate(135deg);
    border-radius: 30% 10% 0 10%;
}

.ornaments .spikes-end::after {
    position: absolute;
    top: -0.8rem;
    left: -0.8rem;
    content: "";
    display: block;
    width: 14rem;
    height: 14rem;
    background: repeating-conic-gradient(
            from 0deg,
            #006600 0deg 2deg,
            transparent 2deg 9deg
    );
}

.ornaments .ornament {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    font-size: 4rem;
}

.ornaments .ornament::before {
    position: absolute;
    content: "";
    display: block;
    width: 3rem;
    height: 2rem;
    top: 1.75rem;
    left: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(-60deg);
}

.ornaments .ornament::after {
    position: absolute;
    content: "";
    display: block;
    width: 6rem;
    height: 6rem;
    top: 0.4rem;
    left: 0.5rem;
    border-radius: 50%;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.5),
            transparent 100%
    );
    transform: rotate(-20deg);
}

.ornament-1 {
    top: 12.7rem;
    left: 5rem;
    background: radial-gradient(
            circle at 75% 75%,
            var(--ornament-1),
            40%,
            var(--ornament-1-light) 80%
    );
}

.ornament-2 {
    top: 16.8rem;
    left: 15rem;
    background: radial-gradient(
            circle at 75% 75%,
            var(--ornament-2),
            40%,
            var(--ornament-2-light) 80%
    );
}
.ornament-3 {
    top: 15.8rem;
    left: 25rem;
    background: radial-gradient(
            circle at 75% 75%,
            var(--ornament-3),
            40%,
            var(--ornament-3-light) 80%
    );
}

.ornaments .hanger {
    position: absolute;
    width: 2rem;
    height: 1rem;
    background-image: linear-gradient(to right, white, lightgrey, white);
    border-radius: 0.25rem 0.25rem 50% 50% / 0.25rem 0.25rem 10% 10%;
    top: -0.75rem;
}

.ornaments .hanger::before {
    position: absolute;
    content: "";
    display: block;
    border-left: 0.1rem solid black;
    height: 3rem;
    top: -3rem;
    left: 1rem;
}

.ornaments .hanger::after {
    position: absolute;
    content: "";
    display: block;
    border-left: 0.1rem solid black;
    border-top: 0.1rem solid black;
    border-right: 0.1rem solid black;
    width: 0.6rem;
    height: 2rem;
    top: -5rem;
    left: 1rem;
    border-radius: 50% 50% 50% 0;
}

/**
 * Day 15 - North Pole sign
 * https://codepen.io/johnnyfekete/pen/MWjmwBY
 */
.north-pole-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    background-color: #fff;
}

.north-pole {
    --north-pole-white: #ffffff;
    --north-pole-white-shadow: #eaf1f7;
    --north-pole-pole: #c70000;
    --north-pole-text: #103250;

    position: relative;
    width: 13rem;
    height: 20rem;
    transform: scale(0.3) translateX(-3rem);
}

@media only screen and (min-width: 576px) {
    .north-pole {
        transform: scale(0.35) translateX(-2rem);
    }
}

.north-pole .ground {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 2rem;
    width: 9rem;
    height: 2rem;
    background-color: var(--north-pole-white);
    border-radius: 50% 50% 20% 20% / 50% 50% 40% 40%;
    overflow: hidden;
}

.north-pole .ground::before {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: var(--north-pole-white-shadow);
    border-radius: 1.5rem;
    transform: rotate(-20deg) skewX(50deg);
    top: 0.3rem;
    left: 1rem;
}

.north-pole .ground::after {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: var(--north-pole-white-shadow);
    border-radius: 1.5rem;
    transform: rotate(-20deg) skewX(30deg);
    top: 0.6rem;
    left: 4rem;
}

.north-pole .pole {
    position: absolute;
    z-index: 0;
    top: 2rem;
    left: 5.75rem;
    bottom: 1rem;
    width: 1.5rem;
    background: repeating-linear-gradient(
            -25deg,
            var(--north-pole-pole),
            var(--north-pole-pole) 1.2rem,
            var(--north-pole-white) 1.2rem,
            var(--north-pole-white) 2.4rem
    );
}

.north-pole .pole::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.2) 0,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0) 70%,
            rgba(0, 0, 0, 0.3) 100%
    );
}

.north-pole .pole::after {
    content: "";
    display: block;
    position: absolute;
    left: 0.7rem;
    right: 0.3rem;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.north-pole .top {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 5.25rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--north-pole-pole);
    border-radius: 50%;
}

.north-pole .top::before {
    content: "";
    display: block;
    position: absolute;
    top: 2rem;
    border-bottom: 0.75rem solid var(--north-pole-pole);
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    height: 0;
    width: 1.5rem;
}

.north-pole .top::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.4rem;
    right: 0.3rem;
    width: 1.3rem;
    height: 1.3rem;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.north-pole .sign {
    position: absolute;
    box-sizing: border-box;
    top: 3.5rem;
    width: 13rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--north-pole-white);
    border-radius: 0.5rem;
    border: 0.35rem solid var(--north-pole-pole);
    font-family: "Verdana", cursive;
    font-size: 2.5rem;
    color: var(--north-pole-text);
}

.north-pole .icicle {
    position: absolute;
    top: 4.65rem;
    width: 1rem;
    height: 2.5rem;
    overflow: hidden;
    transform-origin: top center;
}

.north-pole .icicle::after {
    content: "";
    display: block;
    position: absolute;
    top: -3.5rem;
    left: -2rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background-color: var(--north-pole-white);
    transform: scaleX(0.2) rotate(45deg);
}

.north-pole .icicle-1 {
    left: 1rem;
    transform: scaleY(1.2);
}

.north-pole .icicle-2 {
    left: 2.5rem;
    transform: scaleX(0.8);
}

.north-pole .icicle-3 {
    left: 3.5rem;
    transform: scaleX(0.4) scaleY(0.7);
}

.north-pole .icicle-4 {
    left: 9rem;
    transform: scaleX(0.7) scaleY(0.8);
}

.north-pole .icicle-5 {
    left: 11rem;
    transform: scaleX(0.7) scaleY(1.1);
}

.north-pole .ice-left {
    position: absolute;
    width: 5.5rem;
    height: 0.5rem;
    top: 4.65rem;
    left: -0.15rem;
    overflow: hidden;
}

.north-pole .ice-left::after {
    content: "";
    display: block;
    position: absolute;
    width: 5.5rem;
    height: 2rem;
    top: -1.5rem;
    left: -0.25rem;
    border-radius: 50%;
    background-color: var(--north-pole-white);
}

.north-pole .ice-right {
    position: absolute;
    z-index: -1;
    width: 3rem;
    height: 0.7rem;
    overflow: hidden;
    top: 4.65rem;
    right: -0.2rem;
}

.north-pole .ice-right::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 3rem;
    height: 2rem;
    top: -1.35rem;
    right: 0.5rem;
    border-radius: 50%;
    background-color: var(--north-pole-white);
}

.north-pole .snow {
    position: absolute;
    z-index: 1;
    top: -1rem;
    left: -0.7rem;
    width: 5.7rem;
    height: 1.5rem;
    background-color: var(--north-pole-white);
    border-radius: 50% 50% 20% 20% / 50% 50% 40% 40%;
    overflow: hidden;
    transform: rotate(-5deg);
}

.north-pole .snow::before {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: var(--north-pole-white-shadow);
    border-radius: 1.5rem;
    transform: rotate(-20deg) skewX(50deg);
    top: 0.3rem;
    left: 1rem;
}

.north-pole .snow::after {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: var(--north-pole-white-shadow);
    border-radius: 1.5rem;
    transform: rotate(-20deg) skewX(30deg);
    top: 0.2rem;
    left: 2rem;
}

/**
 * Day 16 - ice skate
 * https://codepen.io/johnnyfekete/pen/MWjoPBR
 */
.skate-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffe66d;
}

.skate {
    --skate-blade: #d8e2dc;
    --skate-gray: #c5d4cb;
    --skate: #00509d;
    --skate-dark: #003f88;
    --skate-brown: #c17c74;
    --skate-brown-dark: #b15b51;

    position: relative;
    z-index: 2;
    width: 16rem;
    height: 16rem;
    transform: scale(0.3) translateX(-4.5rem);
}

@media only screen and (min-width: 576px) {
    .skate {
        transform: scale(0.4) translateX(-3rem);
    }
}

.skate .skate-blade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 14rem;
    height: 1.5rem;
    background-color: var(--skate-blade);
    border-radius: 1rem;
}

.skate .skate-blade::before {
    content: "";
    display: block;
    position: absolute;
    top: -1.5rem;
    left: 13rem;
    width: 3rem;
    height: 3rem;
    background: radial-gradient(
            circle at 0 0,
            transparent 1.5rem,
            var(--skate-blade) 1.5rem,
            var(--skate-blade) 3rem,
            transparent 3rem
    );
}

.skate .skate-blade::after {
    content: "";
    display: block;
    position: absolute;
    top: -2.25rem;
    left: 14.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--skate-blade);
    border-radius: 1rem;
}

.skate .skate-blade-holder-left {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1.5rem;
    left: 1rem;
    width: 3rem;
    height: 3rem;
    background: radial-gradient(
            circle at 0 0,
            transparent 1.5rem,
            var(--skate-gray) 1.5rem,
            var(--skate-gray) 3rem,
            transparent 3rem
    );
}

.skate .skate-blade-holder-left::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1rem;
    left: 1.5rem;
    width: 1.5rem;
    height: 1rem;
    background-color: var(--skate-gray);
}

.skate .skate-blade-holder-right {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1.5rem;
    left: 10rem;
    width: 3rem;
    height: 3rem;
    background: radial-gradient(
            circle at 3rem 0,
            transparent 1.5rem,
            var(--skate-gray) 1.5rem,
            var(--skate-gray) 3rem,
            transparent 3rem
    );
}

.skate .skate-blade-holder-right::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1rem;
    left: 0rem;
    width: 1.5rem;
    height: 1rem;
    background-color: var(--skate-gray);
}

.skate .skate-boot-bottom {
    position: absolute;
    top: 10.75rem;
    left: 1.5rem;
    height: 1.5rem;
    width: 13rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background-color: var(--skate-brown-dark);
}

.skate .skate-boot-bottom::after {
    content: "";
    display: block;
    position: absolute;
    left: 2rem;
    height: 1.5rem;
    width: 11rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background-color: var(--skate-brown);
}

.skate .skate-boot-back {
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    height: 8.75rem;
    width: 4rem;
    border-radius: 0.75rem 0.75rem 0 0;
    background-color: var(--skate-dark);
}

.skate .skate-boot-main {
    position: absolute;
    top: 2rem;
    left: 3.5rem;
    height: 8.75rem;
    width: 2.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
    background-color: var(--skate);
}

.skate .skate-boot-main::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    top: 2.5rem;
    left: 2.5rem;
    width: 5rem;
    height: 5rem;
    background: radial-gradient(
            circle at 5rem 0,
            transparent 5rem,
            var(--skate) 5rem
    );
}

.skate .skate-boot-main-bottom {
    position: absolute;
    top: 8.5rem;
    left: 12rem;
    height: 2.25rem;
    width: 2.5rem;
    border-radius: 0 1.5rem 0 0;
    background-color: var(--skate);
}

.skate .skate-boot-main-bottom::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: -7rem;
    height: 1.25rem;
    width: 7rem;
    background-color: var(--skate);
}

.skate .skate-boot-main-bottom::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    left: -1rem;
    height: 1rem;
    width: 1rem;
    background-color: var(--skate);
    background: radial-gradient(
            circle at 0 0,
            transparent 1rem,
            var(--skate) 1rem
    );
}

.skate .skate-boot-front {
    display: block;
    position: absolute;
    top: 3.5rem;
    left: 3rem;
    height: 7rem;
    width: 9rem;
    background: radial-gradient(
            circle at 9rem 0,
            transparent 5rem,
            var(--skate-dark) 5rem
    );
    transform-origin: right center;
    transform: scaleX(0.8);
}

.skate .skate-boot-front::before {
    content: "";
    display: block;
    position: absolute;
    top: -3.5rem;
    left: -0rem;
    height: 3.5rem;
    width: 4rem;
    background-color: var(--skate-dark);
    border-radius: 3rem 0.75rem 0 0;
}

.skate .skate-tie {
    position: absolute;
    z-index: 5;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1rem;
    background-color: var(--skate-gray);
}

.skate .skate-tie::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    width: 2.75rem;
    height: 0.6rem;
    border-radius: 1rem;
    background-color: var(--skate-brown);
}

.skate .skate-tie.skate-tie--1 {
    top: 4rem;
    left: 5.25rem;
    transform: rotate(-10deg);
}

.skate .skate-tie.skate-tie--2 {
    top: 6rem;
    left: 5.75rem;
    transform: rotate(-20deg);
}

.skate .skate-tie.skate-tie--3 {
    top: 7.6rem;
    left: 7rem;
    transform: rotate(-30deg);
}

.skate .skate-tie.skate-tie--3::after {
    width: 2.5rem;
}

/**
 * Day 17 - shooting start
 * https://codepen.io/johnnyfekete/pen/vYXZPJj
 */
.shooting-star-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #001122;
    background: repeating-radial-gradient(
            circle at 1rem 1rem,
            rgba(255, 255, 255, 0.3) 0,
            transparent 0.2rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 4rem 2rem,
            rgba(255, 255, 255, 0.5) 0,
            transparent 0.1rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 9rem 7rem,
            rgba(255, 255, 255, 0.5) 0,
            transparent 0.1rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 7rem 4.5rem,
            rgba(255, 255, 255, 0.5) 0,
            transparent 0.15rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 3rem 9rem,
            rgba(255, 255, 255, 0.5) 0,
            transparent 0.1rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 12rem 2.5rem,
            rgba(255, 255, 255, 0.5) 0,
            transparent 0.25rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 11rem 8rem,
            rgba(255, 255, 255, 0.2) 0,
            transparent 0.25rem,
            transparent 100%
    ),
    repeating-radial-gradient(
            circle at 2rem 5rem,
            rgba(255, 255, 255, 0.2) 0,
            transparent 0.25rem,
            transparent 100%
    ),
    #001122;
    background-size: 14rem 10rem;
    height: 100%;
    margin: 0;
}

.shooting-star {
    --shooting-star: #f4d35e;
    --shooting-star-tail-1: #9b5de5;
    --shooting-star-tail-2: #00f5d4;
    --shooting-star-tail-3: #f15bb5;

    position: relative;
    width: 12rem;
    height: 10rem;
    filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.5))
    drop-shadow(1px -1px 3px rgba(255, 255, 255, 0.5));
    transform: scale(0.5) translateX(-0.7rem) translateY(2.5rem);
}

@media only screen and (min-width: 576px) {
    .shooting-star {
        transform: scale(0.7) translateX(0.5rem) translateY(2.5rem);
    }
}

.shooting-star .shooting-star__star {
    position: absolute;
    width: 3rem;
    height: 3rem;
    transform-origin: center center;
    transform: rotate(-25deg);
}

.shooting-star .shooting-star__star span {
    position: absolute;
    display: block;
    transform-origin: 50% 90%;
    transform: scaleX(0.6);
}

.shooting-star .shooting-star__star span::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: var(--shooting-star);
    border-radius: 0.25rem 0.25rem 1rem 0.25rem;
    transform: rotate(45deg);
}

.shooting-star .shooting-star__star span:nth-child(2) {
    transform: rotate(72deg) scaleX(0.6);
}

.shooting-star .shooting-star__star span:nth-child(3) {
    transform: rotate(144deg) scaleX(0.6);
}

.shooting-star .shooting-star__star span:nth-child(4) {
    transform: rotate(216deg) scaleX(0.6);
}

.shooting-star .shooting-star__star span:nth-child(5) {
    transform: rotate(-72deg) scaleX(0.6);
}

.shooting-star .shooting-star__tail {
    position: absolute;
    top: 1.3rem;
    left: 1rem;
    width: 8rem;
    height: 8rem;
    background-color: rgba(255, 0, 0, 0.2);
    background: radial-gradient(
            circle at 0 100%,
            transparent 0,
            transparent 5rem,
            var(--shooting-star-tail-1) 5rem,
            var(--shooting-star-tail-1) 6rem,
            var(--shooting-star-tail-2) 6rem,
            var(--shooting-star-tail-2) 7rem,
            var(--shooting-star-tail-3) 7rem,
            var(--shooting-star-tail-3) 8rem,
            transparent 8.05rem
    );
    transform-origin: top left;
    transform: scale(0.8) rotate(-10deg) scaleY(0.6);
}

.shooting-star .shooting-star__tail span {
    position: absolute;
    margin-top: -0.1rem;
    width: 1rem;
    height: 0.75rem;
    border-radius: 0 0 1rem 1rem / 0 0 1rem 1rem;
}

.shooting-star .shooting-star__tail span:nth-child(1) {
    transform: translateX(5rem) translateY(8rem);
    background-color: var(--shooting-star-tail-1);
}

.shooting-star .shooting-star__tail span:nth-child(2) {
    transform: translateX(6rem) translateY(8rem);
    background-color: var(--shooting-star-tail-2);
}

.shooting-star .shooting-star__tail span:nth-child(3) {
    transform: translateX(7rem) translateY(8rem);
    background-color: var(--shooting-star-tail-3);
}

/**
 * Day 18 - animated drum
 * https://codepen.io/johnnyfekete/pen/xxErNmw
 */
.drum-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    margin: 0;
}

.drum {
    --drum-yellow: #e9c46a;
    --drum-dark-yellow: #cf9b1f;
    --drum-light-red: #ef233c;
    --drum-dark-red: #6a040f;
    --drum-white: #edf6f9;
    --drum-top: #cec2ab;
    --drum-stick: #887880;
    position: relative;
    width: 16rem;
    height: 17rem;
    transform: scale(0.22) translateX(-5rem) rotate(5deg);
}

@media only screen and (min-width: 576px) {
    .drum {
        transform: scale(0.3) translateX(-5.5rem) rotate(5deg);
    }
}

.drum .side {
    position: absolute;
    top: 6rem;
}

.drum .side__bottom {
    position: absolute;
    top: 3rem;
    width: 16rem;
    height: 8rem;
    background-color: var(--drum-yellow);
    border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}

.drum .side__bottom::before {
    content: "";
    display: block;
    position: absolute;
    top: -3rem;
    width: 16rem;
    height: 9rem;
    background-color: var(--drum-dark-red);
    border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}

.drum .side__bottom::after {
    content: "";
    display: block;
    position: absolute;
    top: -3.2rem;
    width: 16rem;
    height: 9rem;
    background-color: var(--drum-light-red);
    border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}

.drum .side__top {
    position: absolute;
    width: 16rem;
    height: 3rem;
}

.drum .side__top::before {
    content: "";
    display: block;
    position: absolute;
    width: 16rem;
    height: 3rem;
    background-color: var(--drum-dark-red);
    border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}

.drum .side__top::after {
    content: "";
    display: block;
    position: absolute;
    top: -1.2rem;
    width: 16rem;
    height: 4rem;
    background-color: var(--drum-yellow);
    border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}

.drum .side .pattern {
    position: absolute;
    height: 9rem;
    border-right: 0.4rem solid var(--drum-yellow);
}

.drum .side .pattern::after,
.drum .side .pattern.pattern-6::before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: -0.4rem;
    position: absolute;
    background-color: var(--drum-white);
    border-radius: 50%;
}

.drum .side .pattern.pattern-1 {
    transform: translateX(1.6rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-1::after {
    top: 0.3rem;
}

.drum .side .pattern.pattern-2 {
    transform: translateX(4.4rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-2::after {
    top: 7.6rem;
    left: -0.2rem;
}

.drum .side .pattern.pattern-3 {
    transform: translateX(6.3rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-3::after {
    top: 1.3rem;
    left: -0.05rem;
}

.drum .side .pattern.pattern-4 {
    transform: translateX(9.3rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-4::after {
    top: 8rem;
    left: -0.1rem;
}

.drum .side .pattern.pattern-5 {
    transform: translateX(11.3rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-5::after {
    top: 1.3rem;
    left: -0.1rem;
}

.drum .side .pattern.pattern-6 {
    transform: translateX(14rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-6::before {
    top: 7.6rem;
    left: -0.1rem;
}
.drum .side .pattern.pattern-6::after {
    top: 0.4rem;
}

.drum .top {
    position: absolute;
    top: 2rem;
    width: 16rem;
    height: 5rem;
    background-color: var(--drum-dark-yellow);
    border-radius: 50% / 2rem;
    overflow: hidden;
}

.drum .top::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    width: 16rem;
    height: 4rem;
    background-color: var(--drum-top);
    border-radius: 50% / 2rem;
}

.drum .top::after {
    content: "";
    display: block;
    position: absolute;
    top: -0.1rem;
    left: -0.5rem;
    box-sizing: border-box;
    width: 17rem;
    height: 5.5rem;
    border-radius: 50%;
    border: 0.4rem solid var(--drum-yellow);
}

.drum .drum-stick {
    position: absolute;
    z-index: 5;
    width: 12rem;
    height: 0.6rem;
    background: var(--drum-stick);
    border-radius: 50% 20% 20% 50% / 50%;
    transform-origin: 90% 50%;
}

.drum .drum-stick::before {
    content: "";
    display: block;
    position: absolute;
    width: 0.8rem;
    height: 0.6rem;
    background: var(--drum-stick);
    border-radius: 50%;
}

.drum .drum-stick.drum-stick--left {
    left: -14rem;
    top: -1rem;
    transform: rotate(-170deg);
    -webkit-animation: anim-drum-stick-left 0.3s infinite;
    animation: anim-drum-stick-left 0.3s infinite;
}

.drum .drum-stick.drum-stick--right {
    left: 9rem;
    top: -1rem;
    transform: rotate(-30deg);
    -webkit-animation: anim-drum-stick-right 0.3s infinite;
    animation: anim-drum-stick-right 0.3s infinite;
}

.drum .drum-stick-shadow {
    position: absolute;
    top: 4rem;
    width: 3rem;
    height: 1.5rem;
    background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%);
    border-radius: 50%;
}

.drum .drum-stick-shadow.drum-stick-shadow--left {
    left: 4.5rem;
    -webkit-animation: anim-drum-shadow-left 0.3s infinite;
    animation: anim-drum-shadow-left 0.3s infinite;
}

.drum .drum-stick-shadow.drum-stick-shadow--left {
    left: 4.5rem;
    -webkit-animation: anim-drum-shadow-left 0.3s infinite;
    animation: anim-drum-shadow-left 0.3s infinite;
}

.drum .drum-stick-shadow.drum-stick-shadow--right {
    left: 9rem;
    -webkit-animation: anim-drum-shadow-right 0.3s infinite;
    animation: anim-drum-shadow-right 0.3s infinite;
}

@-webkit-keyframes anim-drum-stick-left {
    0% {
        transform: rotate(-170deg) translateX(1rem);
    }
    50% {
        transform: rotate(-150deg) translateX(0);
    }
    100% {
        transform: rotate(-170deg) translateX(1rem);
    }
}

@keyframes anim-drum-stick-left {
    0% {
        transform: rotate(-170deg) translateX(1rem);
    }
    50% {
        transform: rotate(-150deg) translateX(0);
    }
    100% {
        transform: rotate(-170deg) translateX(1rem);
    }
}

@-webkit-keyframes anim-drum-shadow-left {
    0% {
        transform: scale(1.6);
        opacity: 0.3;
    }
    50% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0.3;
    }
}

@keyframes anim-drum-shadow-left {
    0% {
        transform: scale(1.6);
        opacity: 0.3;
    }
    50% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1.6);
        opacity: 0.3;
    }
}

@-webkit-keyframes anim-drum-stick-right {
    0% {
        transform: rotate(-30deg) translateX(0);
    }
    50% {
        transform: rotate(-10deg) translateX(1rem);
    }
    100% {
        transform: rotate(-30deg) translateX(0);
    }
}

@keyframes anim-drum-stick-right {
    0% {
        transform: rotate(-30deg) translateX(0);
    }
    50% {
        transform: rotate(-10deg) translateX(1rem);
    }
    100% {
        transform: rotate(-30deg) translateX(0);
    }
}

@-webkit-keyframes anim-drum-shadow-right {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.6);
        opacity: 1;
    }
}

@keyframes anim-drum-shadow-right {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.6);
        opacity: 1;
    }
}

/**
 * Day 19 - animated Christmas sparkler
 * https://codepen.io/johnnyfekete/pen/MWjveNj
 */
.sparkler-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;
}

.sparkler {
    --sparkler-stick: #dee2e6;
    --sparkler-gun-powder: #706677;
    --sparkler-burnt: #252525;
    --sparkler-ember: #ff9f1c;

    position: relative;
    margin-top: 2rem;
    height: 16rem;
    transform: scale(0.4) translateX(-0.5rem) translateY(-1.5rem) rotate(55deg);
}

@media only screen and (min-width: 576px) {
    .sparkler {
        transform: scale(0.5) translateX(-0.5rem) translateY(-1.5rem) rotate(55deg);
    }
}

.sparkler .stick {
    position: absolute;
    top: 10rem;
    margin-left: -0.1rem;
    width: 0.2rem;
    height: 6rem;
    background-color: var(--sparkler-stick);
    border-radius: 0.5rem;
}

.sparkler .gun-powder {
    position: absolute;
    margin-left: -0.2rem;
    bottom: 6rem;
    width: 0.4rem;
    height: 10rem;
    background-color: var(--sparkler-burnt);
    border-radius: 0.5rem;
}

.sparkler .gun-powder::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 0.4rem;
    height: 10rem;
    background: linear-gradient(
            to bottom,
            var(--sparkler-ember) 0.3rem,
            var(--sparkler-gun-powder) 0.4rem
    );
    border-radius: 0.5rem;
    -webkit-animation: sparkler-burn-anim 20s infinite;
    animation: sparkler-burn-anim 20s infinite;
}

.sparkler .sparkler-light {
    position: absolute;
    width: 9rem;
    height: 9rem;
    margin-left: -4.4rem;
    margin-top: -1.4rem;
    -webkit-animation: sparkler-light-anim 20s infinite;
    animation: sparkler-light-anim 20s infinite;
}

.sparkler .sparkler-light::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 9rem;
    height: 9rem;
    background-color: rgba(255, 255, 230, 0.05);
    -webkit-animation: sparkler-light-pulsating 2s infinite linear;
    animation: sparkler-light-pulsating 2s infinite linear;
}

.sparkler .spark {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    bottom: 4.3rem;
    left: 4.35rem;
    transform: rotate(var(--spark-rotate));
}

.sparkler .spark::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 0.1rem;
    height: 2rem;
    border-radius: 0.1rem;
    opacity: 0;
    background-color: white;
    transform-origin: bottom center;
    -webkit-animation: sparkler-sparkle 0.5s infinite linear;
    animation: sparkler-sparkle 0.5s infinite linear;
    -webkit-animation-delay: var(--spark-delay);
    animation-delay: var(--spark-delay);
}

@-webkit-keyframes sparkler-burn-anim {
    0% {
        height: 10rem;
    }
    100% {
        height: 0;
    }
}

@keyframes sparkler-burn-anim {
    0% {
        height: 10rem;
    }
    100% {
        height: 0;
    }
}

@-webkit-keyframes sparkler-light-anim {
    0% {
        bottom: 11.5rem;
    }
    100% {
        bottom: 1.5rem;
    }
}

@keyframes sparkler-light-anim {
    0% {
        bottom: 11.5rem;
    }
    100% {
        bottom: 1.5rem;
    }
}

@-webkit-keyframes sparkler-light-pulsating {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes sparkler-light-pulsating {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes sparkler-sparkle {
    0% {
        transform: translateY(-0.5rem) scaleY(0.25);
        opacity: 0;
    }
    10% {
        transform: translateY(-1rem) scaleY(0.5);
        opacity: 0.35;
    }
    30% {
        transform: translateY(-2rem) scaleY(0.5);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-4rem) scaleY(1.5);
        opacity: 0.7;
    }
    51% {
        opacity: 0;
        transform: translateY(-4rem) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scaleY(0.25);
    }
}

@keyframes sparkler-sparkle {
    0% {
        transform: translateY(-0.5rem) scaleY(0.25);
        opacity: 0;
    }
    10% {
        transform: translateY(-1rem) scaleY(0.5);
        opacity: 0.35;
    }
    30% {
        transform: translateY(-2rem) scaleY(0.5);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-4rem) scaleY(1.5);
        opacity: 0.7;
    }
    51% {
        opacity: 0;
        transform: translateY(-4rem) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scaleY(0.25);
    }
}

/**
 * Day 20 - pom hat with a single div
 * https://codepen.io/johnnyfekete/pen/KKgvrJK
 */
.pom-hat-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #b8f2e6;
    height: 100%;
}

.pom-hat {
    --pom-hat-pink: #f28482;
    --pom-hat-green: #84a59d;
    --pom-hat-purple: #6d597a;

    position: absolute;
    width: 8rem;
    height: 10rem;
    border-radius: 4rem 4rem 0 0;
    background: linear-gradient(135deg, var(--pom-hat-green) 25%, transparent 25%) -0.5rem
    0,
    linear-gradient(225deg, var(--pom-hat-green) 25%, transparent 25%) -0.5rem 0,
    linear-gradient(315deg, var(--pom-hat-green) 25%, transparent 25%),
    linear-gradient(45deg, var(--pom-hat-green) 25%, transparent 25%);
    background-size: 1rem 1rem;
    background-color: var(--pom-hat-pink);
    transform: scale(0.5) translateY(1rem);
}

.pom-hat::before {
    content: "";
    display: block;
    width: 8rem;
    height: 10rem;
    border-radius: 4rem 4rem 0 0;
    background: linear-gradient(
            to bottom,
            var(--pom-hat-pink) 0,
            var(--pom-hat-pink) 1.8rem,
            var(--pom-hat-green) 1.8rem,
            var(--pom-hat-green) 2.1rem,
            var(--pom-hat-pink) 2.1rem,
            var(--pom-hat-pink) 2.6rem,
            var(--pom-hat-green) 2.6rem,
            var(--pom-hat-green) 2.9rem,
            var(--pom-hat-pink) 2.9rem,
            var(--pom-hat-pink) 4.5rem,
            transparent 4.5rem,
            transparent 6.5rem,
            var(--pom-hat-pink) 6.5rem
    );
}

.pom-hat::after {
    content: "";
    display: block;
    position: absolute;
    left: -1rem;
    top: -2.8rem;
    width: 10rem;
    height: 13.8rem;

    background: radial-gradient(
            circle at 5rem 1.7rem,
            white 0,
            white 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1rem 10.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1rem 11rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1rem 11.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1rem 12rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1rem 12.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 9rem 10.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 9rem 11rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 9rem 11.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 9rem 12rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 9rem 12.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1.5rem 10.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 1.5rem 12.2rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.8rem,
            transparent 0.8rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 8.5rem 10.5rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.5rem,
            transparent 0.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 8.5rem 12.2rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 0.8rem,
            transparent 0.8rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 2.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 3.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 4.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 5.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 6.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    ),
    radial-gradient(
            circle at 7.5rem 11.4rem,
            var(--pom-hat-purple) 0,
            var(--pom-hat-purple) 1.5rem,
            transparent 1.5rem,
            transparent 100%
    );
}

/**
 * Day 21 - toy train
 * https://codepen.io/johnnyfekete/pen/jOMGMJy
 */
.toy-train-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 0;

}

.toy-train {
    --toy-train-red: #f45b69;
    --toy-train-blue: #456990;
    --toy-train-gold: #edaa41;
    --toy-train-gray: #ababab;

    width: 39rem;
    height: 20rem;
    position: relative;
    transform: scale(0.15) translateX(-16rem) translateY(-45rem);
}

@media only screen and (min-width: 576px) {
    .toy-train {
        transform: scale(0.2) translateX(-15rem) translateY(-26rem);
    }
}

.toy-train .locomotive {
    position: absolute;
    top: 5rem;
    -webkit-animation: train-shake 1s infinite linear;
    animation: train-shake 1s infinite linear;
}

.toy-train .passanger-car {
    position: absolute;
    top: 5rem;
    left: 25rem;
    -webkit-animation: train-shake 1s infinite linear;
    animation: train-shake 1s infinite linear;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.toy-train .locomotive .chimney {
    position: absolute;
    left: 5rem;
    width: 5.5rem;
    height: 1rem;
    border-radius: 0.5rem;
    background-color: var(--toy-train-gold);
}

.toy-train .locomotive .chimney::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 0.5rem;
    width: 4.5rem;
    height: 2rem;
    border-radius: 0.5rem 0.5rem 3rem 3rem;
    background-color: var(--toy-train-blue);
}

.toy-train .locomotive .chimney::after {
    content: "";
    display: block;
    position: absolute;
    top: 2.5rem;
    left: 1.75rem;
    width: 2rem;
    height: 3rem;
    background-color: var(--toy-train-blue);
}

.toy-train .chimney .smoke {
    position: absolute;
    top: -3rem;
    left: 1rem;
    width: 5rem;
    height: 3rem;
    background: radial-gradient(
            circle at 1rem 1.5rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    ),
    radial-gradient(
            circle at 2rem 1rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    ),
    radial-gradient(
            circle at 3rem 1rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    ),
    radial-gradient(
            circle at 4rem 1.5rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    ),
    radial-gradient(
            circle at 2rem 2rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    ),
    radial-gradient(
            circle at 3rem 2rem,
            var(--toy-train-gray) 0,
            var(--toy-train-gray) 0.5rem,
            transparent 1rem
    );
    opacity: 0;
    -webkit-animation: train-smoke 3s infinite linear;
    animation: train-smoke 3s infinite linear;
}

.toy-train .chimney .smoke:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.toy-train .chimney .smoke:nth-child(3) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.toy-train .locomotive .boiler {
    position: absolute;
    z-index: 2;
    top: 7rem;
    left: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--toy-train-gold);
}

.toy-train .locomotive .boiler::before {
    content: "";
    display: block;
    position: absolute;
    top: -2rem;
    left: 0.75rem;
    width: 9.5rem;
    height: 6rem;
    border-radius: 3rem 0 0 3rem;
    background-color: var(--toy-train-red);
}

.toy-train .locomotive .boiler::after {
    content: "";
    display: block;
    position: absolute;
    top: -2.5rem;
    left: 2.75rem;
    width: 1rem;
    height: 7rem;
    border-radius: 1rem;
    background-color: var(--toy-train-gold);
}

.toy-train .car-cabin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 4;
    top: 2rem;
    width: 8em;
    height: 6.5rem;
    border-radius: 0 0;
    background-color: var(--toy-train-blue);
}

.toy-train .car-cabin::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 4;
    top: -2rem;
    left: -1rem;
    right: -1rem;
    height: 2rem;
    border-radius: 2rem 2rem 0.5rem 0.5rem;
    background-color: var(--toy-train-red);
}

.toy-train .passanger-car .car-cabin {
    width: 12rem;
}

.toy-train .car-cabin .window {
    width: 3.5rem;
    height: 4.5rem;
    box-sizing: border-box;
    border: 0.5rem solid var(--toy-train-gold);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

.toy-train .side-bar {
    position: absolute;
    z-index: 5;
    top: 8.5rem;
    left: 4.75rem;
    width: 16em;
    height: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: var(--toy-train-gold);
}

.toy-train .locomotive .car-cabin {
    left: 12.25rem;
}

.toy-train .passanger-car .side-bar {
    left: -0.5rem;
    width: 13rem;
    border-radius: 0.5rem;
}

.toy-train .passanger-car .window:first-child {
    margin-left: 1.5rem;
}
.toy-train .passanger-car .window:last-child {
    margin-right: 1.5rem;
}

.toy-train .locomotive .car-cabin .window {
    border-radius: 2rem 2rem 0.5rem 0.5rem;
}

.toy-train .car-bottom {
    position: absolute;
    z-index: 4;
    top: 9rem;
    height: 4rem;
    border-radius: 0 0 1rem 1rem;
    background-color: var(--toy-train-blue);
}

.toy-train .locomotive .car-bottom {
    left: 4.75rem;
    width: 15.5rem;
}

.toy-train .passanger-car .car-bottom {
    width: 12rem;
}

.toy-train .bumper {
    position: absolute;
    right: -2rem;
    top: 1rem;
    width: 2rem;
    height: 1rem;
    background-color: var(--toy-train-blue);
}

.toy-train .bumper::after {
    content: "";
    display: block;
    position: absolute;
    right: 0rem;
    top: -0.5rem;
    width: 1rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--toy-train-blue);
}

.toy-train .bumper.bumper--front {
    left: -2rem;
    right: auto;
    transform: rotate(180deg);
}

.toy-train .front {
    position: absolute;
    z-index: 7;
    left: 2.5rem;
    top: 9.5rem;
    width: 3.5rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: var(--toy-train-gray);
}

.toy-train .snow-breaker {
    position: absolute;
    z-index: 6;
    left: 0.75rem;
    top: 11rem;
    width: 3.5rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 0.75rem solid var(--toy-train-red);
    border-left: none;
    border-top: none;
}

.toy-train .snow-breaker::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 5rem;
    height: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--toy-train-red);
    transform-origin: 0.375rem 0.375rem;
    transform: rotate(-50deg);
}

.toy-train .snow-breaker::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -0.5rem;
    left: 2rem;
    width: 4rem;
    height: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--toy-train-red);
    transform-origin: 0.375rem 0.375rem;
    transform: rotate(-70deg);
}

.wheel {
    position: absolute;
    top: 1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: radial-gradient(
            circle at center,
            var(--toy-train-gold) 10%,
            var(--toy-train-red) 10%,
            var(--toy-train-red) 25%,
            transparent 25%,
            transparent 55%,
            var(--toy-train-red) 55%
    ),
    linear-gradient(
            0deg,
            transparent 0,
            transparent 45%,
            var(--toy-train-red) 45%,
            var(--toy-train-red) 55%,
            transparent 55%,
            transparent 100%
    ),
    linear-gradient(
            60deg,
            transparent 0,
            transparent 45%,
            var(--toy-train-red) 45%,
            var(--toy-train-red) 55%,
            transparent 55%,
            transparent 100%
    ),
    linear-gradient(
            120deg,
            transparent 0,
            transparent 45%,
            var(--toy-train-red) 45%,
            var(--toy-train-red) 55%,
            transparent 55%,
            transparent 100%
    );
}

.toy-train .locomotive .wheel:first-child {
    left: 3rem;
    -webkit-animation: train-wheel-1 2s infinite linear;
    animation: train-wheel-1 2s infinite linear;
}

.toy-train .locomotive .wheel:nth-child(2) {
    left: 10rem;
    -webkit-animation: train-wheel-2 2s infinite linear;
    animation: train-wheel-2 2s infinite linear;
}

.toy-train .passanger-car .wheel:first-child {
    left: 0.5rem;
    -webkit-animation: train-wheel-1 2s infinite linear;
    animation: train-wheel-1 2s infinite linear;
}

.toy-train .passanger-car .wheel:nth-child(2) {
    left: 6.5rem;
    -webkit-animation: train-wheel-2 2s infinite linear;
    animation: train-wheel-2 2s infinite linear;
}

@-webkit-keyframes train-wheel-1 {
    0% {
        transform: rotate(400deg);
    }

    100% {
        transform: rotate(40deg);
    }
}

@keyframes train-wheel-1 {
    0% {
        transform: rotate(400deg);
    }

    100% {
        transform: rotate(40deg);
    }
}

@-webkit-keyframes train-wheel-2 {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes train-wheel-2 {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes train-shake {
    0% {
        transform: translate(0.1rem, 0.1rem);
    }
    10% {
        transform: translate(-0.1rem, 0rem);
    }
    20% {
        transform: translate(0rem, -0.1rem);
    }
    30% {
        transform: translate(0.1rem, -0.1rem);
    }
    40% {
        transform: translate(-0.1rem, 0rem);
    }
    50% {
        transform: translate(0rem, -0.1rem);
    }
    60% {
        transform: translate(-0.1rem, 0rem);
    }
    70% {
        transform: translate(0rem, -0.1rem);
    }
    80% {
        transform: translate(-0.1rem, 0.1rem);
    }
    90% {
        transform: translate(-0.1rem, -0.1rem);
    }
    100% {
        transform: translate(0.1rem, 0.1rem);
    }
}

@keyframes train-shake {
    0% {
        transform: translate(0.1rem, 0.1rem);
    }
    10% {
        transform: translate(-0.1rem, 0rem);
    }
    20% {
        transform: translate(0rem, -0.1rem);
    }
    30% {
        transform: translate(0.1rem, -0.1rem);
    }
    40% {
        transform: translate(-0.1rem, 0rem);
    }
    50% {
        transform: translate(0rem, -0.1rem);
    }
    60% {
        transform: translate(-0.1rem, 0rem);
    }
    70% {
        transform: translate(0rem, -0.1rem);
    }
    80% {
        transform: translate(-0.1rem, 0.1rem);
    }
    90% {
        transform: translate(-0.1rem, -0.1rem);
    }
    100% {
        transform: translate(0.1rem, 0.1rem);
    }
}

@-webkit-keyframes train-smoke {
    0% {
        transform: translate(-1.5rem, 0.5rem) scale(0.5);
        opacity: 0;
    }
    10% {
        transform: translate(0rem, 0rem) scale(0.7);
        opacity: 0.5;
    }
    20% {
        transform: translate(2rem, -1rem) scale(1);
        opacity: 1;
    }
    70% {
        transform: translate(15rem, -4rem) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(20rem, -6rem) scale(1.5);
        opacity: 0;
    }
}

@keyframes train-smoke {
    0% {
        transform: translate(-1.5rem, 0.5rem) scale(0.5);
        opacity: 0;
    }
    10% {
        transform: translate(0rem, 0rem) scale(0.7);
        opacity: 0.5;
    }
    20% {
        transform: translate(2rem, -1rem) scale(1);
        opacity: 1;
    }
    70% {
        transform: translate(15rem, -4rem) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(20rem, -6rem) scale(1.5);
        opacity: 0;
    }
}

/**
 * Day 22- jingle bells sheet music
 * https://codepen.io/johnnyfekete/pen/LYRzXMy
 */
.jingle-bells-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;

    height: 100%;
}

.jingle-bells {
    position: absolute;
    left: 0;
    width: 80%;
    height: 10rem;
    font-family: "Verdana";
    transform: scale(0.15) translateX(-40rem);
}

@media only screen and (min-width: 576px) {
    .jingle-bells {
        transform: scale(0.2) translateX(-35rem);
    }
}

.jingle-bells .staff-lines {
    display: flex;
    height: 10rem;
    margin-left: 55rem;
    width: 700rem;
    background: linear-gradient(
            to bottom,
            black 0,
            black 2%,
            transparent 2%,
            transparent 24.5%,
            black 24.5%,
            black 26.5%,
            transparent 26.5%,
            transparent 49%,
            black 49%,
            black 51%,
            transparent 51%,
            transparent 73.5%,
            black 73.5%,
            black 75.5%,
            transparent 75.5%,
            transparent 98%,
            black 98%,
            black 100%
    );

    transform: translateX(-540rem);
    -webkit-animation: jingle-bells-melody 23s linear;
    animation: jingle-bells-melody 23s linear;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.jingle-bells .clef {
    margin-top: -9.5rem;
    margin-right: 5rem;
    font-size: 23.5rem;
}

.jingle-bells .bar {
    position: relative;
    display: flex;
    min-width: 28rem;
    height: 10rem;
    margin-left: 2.5rem;
    padding-right: 2rem;
    border-right: 0.3rem solid black;
}

.jingle-bells .bar.bar--end::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -1.5rem;
    width: 0.8rem;
    height: 10rem;
    background-color: black;
}

.jingle-bells .note {
    font-size: 13rem;
    height: 13rem;
    margin-right: 2rem;
    min-width: 5.33rem;

    -webkit-animation: jingle-bells-note 0.5s linear;

    animation: jingle-bells-note 0.5s linear;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.jingle-bells .note.note--full {
    position: relative;
    top: 1.3rem;
}

.jingle-bells .note.note--c {
    margin-top: 1.2rem;
    position: relative;
}

.jingle-bells .note.note--c::after {
    content: "";
    display: block;
    position: absolute;
    margin-top: -6.5rem;
    width: 5.5rem;
    border-bottom: 0.2rem solid black;
}

.jingle-bells .note.note--full.note--c::after {
    margin-top: -7.8rem;
}

.jingle-bells .note.note--d {
    margin-top: 0;
}

.jingle-bells .note.note--e {
    margin-top: -1.5rem;
}

.jingle-bells .note.note--f {
    margin-top: -2.75rem;
}

.jingle-bells .note.note--g {
    margin-top: -4rem;
}

.calendar-grid :checked ~ .inside .jingle-bells .staff-lines,
.calendar-grid :checked ~ .inside .jingle-bells .note {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.jingle-bells .note.note--a1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.jingle-bells .note.note--a2 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.jingle-bells .note.note--a3 {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.jingle-bells .note.note--a4 {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.jingle-bells .note.note--a5 {
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
.jingle-bells .note.note--a6 {
    -webkit-animation-delay: 3.1s;
    animation-delay: 3.1s;
}
.jingle-bells .note.note--a7 {
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
}
.jingle-bells .note.note--a8 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.jingle-bells .note.note--a9 {
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
}
.jingle-bells .note.note--a10 {
    -webkit-animation-delay: 4.9s;
    animation-delay: 4.9s;
}
.jingle-bells .note.note--a11 {
    -webkit-animation-delay: 5.2s;
    animation-delay: 5.2s;
}
.jingle-bells .note.note--a12 {
    -webkit-animation-delay: 6.6s;
    animation-delay: 6.6s;
}
.jingle-bells .note.note--a13 {
    -webkit-animation-delay: 6.9s;
    animation-delay: 6.9s;
}
.jingle-bells .note.note--a14 {
    -webkit-animation-delay: 7.3s;
    animation-delay: 7.3s;
}
.jingle-bells .note.note--a15 {
    -webkit-animation-delay: 7.9s;
    animation-delay: 7.9s;
}
.jingle-bells .note.note--a16 {
    -webkit-animation-delay: 8.2s;
    animation-delay: 8.2s;
}
.jingle-bells .note.note--a17 {
    -webkit-animation-delay: 8.5s;
    animation-delay: 8.5s;
}
.jingle-bells .note.note--a18 {
    -webkit-animation-delay: 8.8s;
    animation-delay: 8.8s;
}
.jingle-bells .note.note--a19 {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}
.jingle-bells .note.note--a20 {
    -webkit-animation-delay: 9.3s;
    animation-delay: 9.3s;
}
.jingle-bells .note.note--a21 {
    -webkit-animation-delay: 9.6s;
    animation-delay: 9.6s;
}
.jingle-bells .note.note--a22 {
    -webkit-animation-delay: 9.9s;
    animation-delay: 9.9s;
}
.jingle-bells .note.note--a23 {
    -webkit-animation-delay: 10.3s;
    animation-delay: 10.3s;
}
.jingle-bells .note.note--a24 {
    -webkit-animation-delay: 10.7s;
    animation-delay: 10.7s;
}
.jingle-bells .note.note--a25 {
    -webkit-animation-delay: 11.4s;
    animation-delay: 11.4s;
}
.jingle-bells .note.note--a26 {
    -webkit-animation-delay: 12.4s;
    animation-delay: 12.4s;
}
.jingle-bells .note.note--a27 {
    -webkit-animation-delay: 12.7s;
    animation-delay: 12.7s;
}
.jingle-bells .note.note--a28 {
    -webkit-animation-delay: 13.1s;
    animation-delay: 13.1s;
}
.jingle-bells .note.note--a29 {
    -webkit-animation-delay: 13.8s;
    animation-delay: 13.8s;
}
.jingle-bells .note.note--a30 {
    -webkit-animation-delay: 14.1s;
    animation-delay: 14.1s;
}
.jingle-bells .note.note--a31 {
    -webkit-animation-delay: 14.5s;
    animation-delay: 14.5s;
}
.jingle-bells .note.note--a32 {
    -webkit-animation-delay: 15.1s;
    animation-delay: 15.1s;
}
.jingle-bells .note.note--a33 {
    -webkit-animation-delay: 15.4s;
    animation-delay: 15.4s;
}
.jingle-bells .note.note--a34 {
    -webkit-animation-delay: 15.8s;
    animation-delay: 15.8s;
}
.jingle-bells .note.note--a35 {
    -webkit-animation-delay: 16.3s;
    animation-delay: 16.3s;
}
.jingle-bells .note.note--a36 {
    -webkit-animation-delay: 16.6s;
    animation-delay: 16.6s;
}
.jingle-bells .note.note--a37 {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.jingle-bells .note.note--a38 {
    -webkit-animation-delay: 18.3s;
    animation-delay: 18.3s;
}
.jingle-bells .note.note--a39 {
    -webkit-animation-delay: 18.7s;
    animation-delay: 18.7s;
}
.jingle-bells .note.note--a40 {
    -webkit-animation-delay: 19.3s;
    animation-delay: 19.3s;
}
.jingle-bells .note.note--a41 {
    -webkit-animation-delay: 19.6s;
    animation-delay: 19.6s;
}
.jingle-bells .note.note--a42 {
    -webkit-animation-delay: 19.9s;
    animation-delay: 19.9s;
}
.jingle-bells .note.note--a43 {
    -webkit-animation-delay: 20.3s;
    animation-delay: 20.3s;
}
.jingle-bells .note.note--a44 {
    -webkit-animation-delay: 20.4s;
    animation-delay: 20.4s;
}
.jingle-bells .note.note--a45 {
    -webkit-animation-delay: 20.7s;
    animation-delay: 20.7s;
}
.jingle-bells .note.note--a46 {
    -webkit-animation-delay: 21s;
    animation-delay: 21s;
}
.jingle-bells .note.note--a47 {
    -webkit-animation-delay: 21.3s;
    animation-delay: 21.3s;
}
.jingle-bells .note.note--a48 {
    -webkit-animation-delay: 21.7s;
    animation-delay: 21.7s;
}
.jingle-bells .note.note--a49 {
    -webkit-animation-delay: 22.1s;
    animation-delay: 22.1s;
}

@-webkit-keyframes jingle-bells-melody {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-540rem);
    }
}

@keyframes jingle-bells-melody {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-540rem);
    }
}

@-webkit-keyframes jingle-bells-note {
    0% {
        filter: drop-shadow(0 0 0 black);
        transform: scale(1) translateY(0);
    }
    50% {
        filter: drop-shadow(0 -1rem 1.3rem black);
        transform: scale(1.2) translateY(-1.5rem);
    }
    100% {
        filter: drop-shadow(0 -2rem 2rem transparent);
        transform: scale(1) translateY(0);
    }
}

@keyframes jingle-bells-note {
    0% {
        filter: drop-shadow(0 0 0 black);
        transform: scale(1) translateY(0);
    }
    50% {
        filter: drop-shadow(0 -1rem 1.3rem black);
        transform: scale(1.2) translateY(-1.5rem);
    }
    100% {
        filter: drop-shadow(0 -2rem 2rem transparent);
        transform: scale(1) translateY(0);
    }
}

/**
 * Day 23 - Rudolph, the red nosed reindeer
 * https://codepen.io/johnnyfekete/pen/xxEPYGj
 */
.reindeer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee4df;
    height: 100%;
    margin: 0;
}

.reindeer {
    --rudolph-antler: #ddb892;
    --rudolph-body: #9d6b53;
    --rudolph-body-dark: #946651;
    --rudolph-nose: #8c6351;
    --rudolph-nose-red: #690500;
    --rudolph-eye: #432818;
    --rudolph-ear: #774936;
    --rudolph-belly: #ede0d4;
    --rudolph-leg: #432818;

    position: relative;
    width: 16rem;
    height: 16rem;
    transform: scale(0.4) translateX(-3.5rem);
}

@media only screen and (min-width: 576px) {
    .reindeer {
        transform: scale(0.4) translateX(-3.5rem);
    }
}

.reindeer .antler {
    position: absolute;
    margin: 2.7rem 0 0 2.3rem;
    width: 5rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background-color: var(--rudolph-antler);
    transform-origin: 5.7rem 0;
    transform: translate(-1rem, 2.5rem) rotate(20deg);
}

.reindeer .antler.antler--right {
    transform: scaleX(-1) translate(-1rem, 2.5rem) rotate(20deg);
}

.reindeer .antler .hook:first-child {
    position: absolute;
    top: -2.3rem;
    left: -2.3rem;
    width: 3rem;
    height: 3rem;
    background: radial-gradient(
            circle at 100% 0,
            transparent,
            transparent 2.3rem,
            var(--rudolph-antler) 2.3rem,
            var(--rudolph-antler) 3rem,
            transparent 3rem
    );
}

.reindeer .antler .hook:nth-child(2) {
    position: absolute;
    top: -1.7rem;
    width: 2.4rem;
    height: 2.4rem;
    background: radial-gradient(
            circle at 100% 0,
            transparent,
            transparent 1.7rem,
            var(--rudolph-antler) 1.7rem,
            var(--rudolph-antler) 2.4rem,
            transparent 2.4rem
    );
}

.reindeer .antler .hook:nth-child(3) {
    position: absolute;
    top: -1.3rem;
    left: 1.5rem;
    width: 2rem;
    height: 2rem;
    background: radial-gradient(
            circle at 100% 0,
            transparent,
            transparent 1.3rem,
            var(--rudolph-antler) 1.3rem,
            var(--rudolph-antler) 2rem,
            transparent 2rem
    );
}

.reindeer .antler .hook::before {
    content: "";
    display: block;
    position: absolute;
    top: -0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--rudolph-antler);
    border-radius: 0.35rem;
}

.reindeer .head {
    position: absolute;
    z-index: 3;
    top: 4rem;
    left: 5rem;
    width: 6rem;
    height: 6rem;
}

.reindeer .head .face {
    position: absolute;
    width: 6rem;
    height: 6rem;
    background: var(--rudolph-body);
    border-radius: 50% 50% 50% 50% / 50% 50% 60% 60%;
}

.reindeer .head .face::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.05rem;
    left: 0.5rem;
    width: 5rem;
    height: 5.4rem;
    border-radius: 50%;
    background: radial-gradient(
            circle at center,
            transparent,
            transparent 2.5rem,
            var(--rudolph-body-dark) 2.5rem,
            var(--rudolph-body-dark) 5rem
    );
    background-position: 0 0.2rem;
    transform: scaleX(1.1) rotate(45deg) scaleX(1.1) scale(0.9);
}

.reindeer .ear {
    position: absolute;
    left: -2.6rem;
    top: 1.5rem;
    width: 5rem;
    height: 2rem;
    background: var(--rudolph-body);
    border-radius: 50% 50% 60% 40% / 50% 40% 40% 50%;
    transform: rotate(-10deg) scale(0.8);
}

.reindeer .ear::after {
    content: "";
    diplay: block;
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    width: 3rem;
    height: 1.2rem;
    background: var(--rudolph-ear);
    border-radius: 50% 50% 50% 40% / 50% 40% 60% 50%;
}

.reindeer .ear.ear--right {
    left: auto;
    right: -2.6rem;
    transform: rotate(10deg) scaleX(-1) scale(0.8);
}

.reindeer .eye {
    position: absolute;
    top: 2.5rem;
    left: 2rem;
    width: 0.6rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--rudolph-eye);
    transform: rotate(10deg);
}

.reindeer .eye.eye--right {
    left: 3.4rem;
    transform: rotate(-10deg);
}

.reindeer .nose {
    position: absolute;
    top: 3.5rem;
    left: 0.7rem;
    width: 4.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: var(--rudolph-nose);
}

.reindeer .nose::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.3rem;
    left: 0.6rem;
    width: 3.4rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: var(--rudolph-nose-red);
}

.reindeer .nose::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.6rem;
    left: 1.6rem;
    width: 1.8rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}

.reindeer .body {
    position: absolute;
    top: 9.6rem;
    left: 5rem;
    width: 6rem;
    height: 6rem;
    background: var(--rudolph-body);
    border-radius: 3rem 3rem 0 0 / 4rem 4rem 0 0;
}

.reindeer .body::after {
    content: "";
    display: block;
    position: absolute;
    width: 3rem;
    height: 4rem;
    background-color: var(--rudolph-belly);
    border-radius: 50%;
    top: 0rem;
    left: 1.5rem;
}

.reindeer .hand {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: 0.8rem;
    width: 2rem;
    height: 2rem;
    background: radial-gradient(
            circle at 100% 0,
            transparent,
            transparent 1.15rem,
            var(--rudolph-leg) 1.2rem,
            var(--rudolph-leg) 2rem,
            transparent 2.05rem
    );
    transform: scaleX(0.7) rotate(10deg);
}

.reindeer .hand::after {
    content: "";
    display: block;
    position: absolute;
    top: 1.2rem;
    left: 1.6rem;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--rudolph-leg);
    border-radius: 50%;
}

.reindeer .hand.hand--right {
    left: 3.2rem;
    transform: scaleX(-1) scaleX(0.7) rotate(10deg);
}

.reindeer .legs {
    position: absolute;
    left: -1rem;
    top: 2rem;
    width: 8rem;
    height: 4rem;
    overflow: hidden;
}

.reindeer .legs::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 0.3rem;
    width: 2rem;
    height: 3.4rem;
    background-color: var(--rudolph-body);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.reindeer .legs::after {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    right: 0.3rem;
    width: 2rem;
    height: 3.4rem;
    background-color: var(--rudolph-body);
    border-radius: 50%;
    transform: rotate(20deg);
}

.reindeer .foot {
    position: absolute;
    width: 3rem;
    height: 1.5rem;
    background-color: var(--rudolph-leg);
    border-radius: 1.5rem 1.5rem 0 0;
    top: 4.5rem;
}

.reindeer .foot.foot--right {
    left: 3rem;
}

/**
 * Day 24 - 3D CSS Christmas tree
 * https://codepen.io/johnnyfekete/pen/YzGEMKx
 */
.christmas-tree-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    min-height: 100%;
    width: 100%;
    margin: 0;
}

.christmas-tree-container {
    --christmas-tree-green-1: #047a07;
    --christmas-tree-green-2: #0b6e4f;
    --christmas-tree-green-3: #08a045;
    --christmas-tree-green-4: #073b3a;
    --christmas-tree-ornament-1: #ffba08;
    --christmas-tree-ornament-2: #4cc9f0;
    --christmas-tree-ornament-3: #ffffff;
    --christmas-tree-ornament-4: #f72585;

    perspective: 400px;
    position: relative;
    width: 340px;
    height: 360px;
    transform: translateX(0px) translateY(-110px) scale(0.28);
}

@media only screen and (min-width: 576px) {
    .christmas-tree-container {
        transform: scale(0.7);
    }
}

.christmas-tree-container .glow {
    position: absolute;
    top: -60px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at center, white, transparent 50px);
    -webkit-animation: christmas-tree-glow 5s infinite linear;
    animation: christmas-tree-glow 5s infinite linear;
}

.christmas-tree-container .shadow {
    position: absolute;
    top: 225px;
    left: -20px;
    width: 140px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 576px) {
    .christmas-tree-container .glow {
        left: 100px;
    }

    .christmas-tree-container .shadow {
        left: 80px;
    }
}

.christmas-tree {
    position: relative;
    margin-top: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    transform-style: preserve-3d;
    -webkit-animation: christmas-tree-rotate-mobile 10s infinite linear;
    animation: christmas-tree-rotate-mobile 10s infinite linear;
}

@media only screen and (min-width: 576px) {
    .christmas-tree {
        -webkit-animation: christmas-tree-rotate 10s infinite linear;
        animation: christmas-tree-rotate 10s infinite linear;
    }
}

.christmas-tree .branches,
.christmas-tree .ct-ornaments,
.christmas-tree .tree-top {
    transform-style: preserve-3d;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.christmas-tree .branch {
    position: absolute;
    border-radius: 5px;
    background-color: var(--christmas-tree-green-1);
    transform-origin: center center;
}

.christmas-tree .branch:nth-child(3n + 2) {
    background-color: var(--christmas-tree-green-2);
}
.christmas-tree .branch:nth-child(3n + 1) {
    background-color: var(--christmas-tree-green-3);
}
.christmas-tree .branch:nth-child(4n + 2) {
    background-color: var(--christmas-tree-green-4);
}

.christmas-tree .ct-ornament {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--christmas-tree-ornament-1);
    transform-origin: center center;
    transform-style: preserve-3d;
}

.christmas-tree .ct-ornament:nth-child(4n + 0) {
    background-color: var(--christmas-tree-ornament-2);
}
.christmas-tree .ct-ornament:nth-child(4n + 1) {
    background-color: var(--christmas-tree-ornament-3);
}
.christmas-tree .ct-ornament:nth-child(4n + 2) {
    background-color: var(--christmas-tree-ornament-4);
}

.christmas-tree .star {
    transform-style: preserve-3d;
    transform: translateZ(225px) translateY(-4px) rotateX(-90deg);
}

.christmas-tree .star,
.christmas-tree .star:before,
.christmas-tree .star:after {
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    border-top: solid 10px yellow;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    position: absolute;
    top: 0;
    left: calc(50% - 15px);
}

.christmas-tree .star:before {
    transform: rotate(72deg);
    top: -11px;
    left: -15px;
}

.christmas-tree .star:after {
    transform: rotate(287deg);
    top: -11px;
    left: -15px;
}

@-webkit-keyframes christmas-tree-rotate {
    0% {
        transform: translateX(100px) rotateX(60deg) rotateZ(0);
    }
    99.99999% {
        transform: translateX(100px) rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes christmas-tree-rotate {
    0% {
        transform: translateX(100px) rotateX(60deg) rotateZ(0);
    }
    99.99999% {
        transform: translateX(100px) rotateX(60deg) rotateZ(360deg);
    }
}

@-webkit-keyframes christmas-tree-rotate-mobile {
    0% {
        transform: rotateX(60deg) rotateZ(0);
    }
    99.99999% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes christmas-tree-rotate-mobile {
    0% {
        transform: rotateX(60deg) rotateZ(0);
    }
    99.99999% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@-webkit-keyframes christmas-tree-glow {
    0% {
        transform: scale(1.1);
        opacity: 0.15;
    }
    50% {
        transform: scale(0.7);
        opacity: 0.25;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.15;
    }
}

@keyframes christmas-tree-glow {
    0% {
        transform: scale(1.1);
        opacity: 0.15;
    }
    50% {
        transform: scale(0.7);
        opacity: 0.25;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.15;
    }
}

/* Winner Banner */
.advent-winner-banner {
    background: linear-gradient(135deg, #333 0%, #000000 50%, #333 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgb(0 0 0 / 30%), 0 0 30px rgb(255 255 255 / 15%);
    border: 2px solid rgb(255 255 255 / 30%);
    position: relative;
    overflow: hidden;
}

.advent-winner-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgb(255 255 255 / 10%) 0%, transparent 50%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.advent-winner-banner__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.advent-winner-banner__icon {
    font-size: 48px;
    animation: celebrateBounce 1s ease-in-out infinite;
}

@keyframes celebrateBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.advent-winner-banner__text {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.advent-winner-banner__text h3 {
    color: #ffffff;
    font-size: 22px;
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgb(255 255 255 / 30%);
}

.advent-winner-banner__text p {
    color: #fff;
    margin: 0 0 5px;
    font-size: 16px;
}

.advent-winner-banner__text strong {
    color: #ffffff;
    font-size: 20px;
}

.advent-winner-banner__date {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
}

.advent-winner-banner__order {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-style: italic;
}

.advent-winner-banner__btn {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgb(255 255 255 / 40%);
}

.advent-winner-banner__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    color: #1a472a;
    text-decoration: none;
}

/* Disabled state for calendar when already won */
.calendar-grid[data-user-award="true"] .day input[type="checkbox"] {
    pointer-events: none;
}

.calendar-grid[data-user-award="true"] .day label {
    cursor: default;
}

@media (max-width: 600px) {
    .advent-winner-banner__content {
        flex-direction: column;
        text-align: center;
    }

    .advent-winner-banner__icon {
        font-size: 36px;
    }

    .advent-winner-banner__text h3 {
        font-size: 18px;
    }

    .advent-winner-banner__text p {
        font-size: 14px;
    }
}

/* Advent Calendar Modal */
.advent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.advent-modal.is-active {
    display: flex;
}

.advent-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.advent-modal__content {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.advent-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advent-modal__close:hover {
    background: rgba(0, 0, 0, 0.2);
}

.advent-modal__icon {
    font-size: 64px;
    margin-bottom: 15px;
    animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

.advent-modal__title {
    color: #000000;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
}

.advent-modal__text {
    color: #000000;
    font-size: 20px;
    margin: 0 0 25px;
}

.advent-modal__text span {
    color: #000000;
    font-weight: 700;
    font-size: 24px;
}

.advent-modal__btn {
    display: inline-block;
    padding: 15px 30px;
    background: #000000;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.advent-modal__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.advent-modal__btn:active {
    transform: translateY(0);
}

.advent-modal__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.advent-modal__btn.is-success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: #fff;
}

/* Loading State */
.advent-modal__loading {
    padding: 40px 20px;
    text-align: center;
}

.advent-modal__loading p {
    color: #000000;
    font-size: 18px;
    margin: 20px 0 0;
}

.advent-modal__spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Subtitle */
.advent-modal__subtitle {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    margin: 0 0 25px;
}

/* Secondary button */
.advent-modal__btn--secondary {
    background: #000000;
    border: 2px solid #000000;
    color: #ffffff;
}

.advent-modal__btn--secondary:hover {
    background: #333333;
    border-color: #333333;
}

/* Auth Form Styles */
.advent-auth-form {
    margin-top: 20px;
}

.advent-auth-form__field {
    margin-bottom: 15px;
}

.advent-auth-form__input {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.advent-auth-form__input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.advent-auth-form__input:focus {
    outline: none;
    border-color: #000000;
    background: #ffffff;
}

.advent-auth-form__info {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    margin: 0 0 20px;
}

.advent-auth-form__info span {
    color: #000000;
    font-weight: 600;
}

.advent-auth-form__code-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.advent-code-input {
    width: 50px;
    height: 60px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
    transition: all 0.3s ease;
}

.advent-code-input:focus {
    outline: none;
    border-color: #000000;
    background: #ffffff;
}

.advent-auth-form__error {
    color: #ff6b6b;
    font-size: 13px;
    margin: 10px 0 0;
    min-height: 18px;
}

.advent-auth-form__back {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.advent-auth-form__back:hover {
    color: #000000;
}

.border-text-advent{
    font-size: 12px;
    text-align: right;
    border: 1px solid #000;
    border-radius: 15px;
    padding: 2px 7px;
    position: absolute;
    top: 62px;
    right: -21px;
}

body{
    background: url('./img/back_light.webp') no-repeat center center fixed;
    background-size: cover;
}
.auth-border-inf{
    border-radius: 10px;
    border: 1px solid #000;
    padding: 2px 5px;
    top: 85px;
    position: absolute;
    transform: rotate(-10deg);
    right: 30px;
}

@media (max-width: 480px) {
    body{
        background-position: left 18% bottom 45%;
    }
    .border-text-advent{
        top: 52px;
    }
    .advent-modal__content {
        padding: 30px 20px;
    }

    .advent-modal__icon {
        font-size: 48px;
    }

    .advent-modal__title {
        font-size: 22px;
    }

    .advent-modal__text {
        font-size: 16px;
    }

    .advent-modal__text span {
        font-size: 20px;
    }

    .advent-modal__btn {
        padding: 12px 25px;
        font-size: 14px;
        width: 100%;
    }

    .advent-code-input {
        width: 45px;
        height: 55px;
        font-size: 20px;
    }

    .advent-auth-form__input {
        padding: 12px 15px;
        font-size: 15px;
    }
    .calendar-grid .info {
        margin-top: -30px;
        margin-bottom: 5px;
    }
    .auth-border-inf{
        position: initial;
    }
}