@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");
@import url("https://csschristmascalendar.com/assets/freeserif/font.css");

body {
  background: url(https://i.imgur.com/FnJbmo1.jpg) no-repeat top center #8ac1d6;
  background-size: cover;
  font-family: "Mountains of Christmas", cursive;
  display: flex;
  flex-direction: column;
}

/* 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"
    "day22  day3   day8"
    "day9   day18  day11"
    "day2   day24  day13"
    "day12  day10  day4"
    "day20  day1   day7"
    "day5   day14  day17"
    "day16  day23  day6"
    "day15  day21  day19";
}

/* 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  day11  day20  day16"
      "title  title  title  day1   day18  day12"
      "day6   day22  day14  day24  day24  day4  "
      "day10  day21  day2   day24  day24  day8"
      "day3   day9   day7   day13  day23  day19";
  }
}

/* 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: 5rem;
    flex-direction: column;
  }
}

.calendar-grid .title-1 {
  color: #9c163f;
  display: block;
  transform: rotate(-10deg);
  margin-right: 1rem;
}

.calendar-grid .title-2 {
  color: #413486;
  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: #10303c;
  font-size: 3em;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.calendar-grid .door .back {
  background: linear-gradient(to right, #384044, #2e454f);
  transform: rotateY(-180deg);
}

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

.calendar-grid :checked + .door {
  transform: rotateY(-180deg);
  border-color: #10303c;
  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: #1d3557;
  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 .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;
}

footer {
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: 1rem;
  opacity: 0.5;
  transition: opacity 400ms ease-in-out;
}

footer:hover {
  opacity: 1;
}

footer div {
  display: flex;
  align-items: center;
  background-color: #161e2b;
  border-radius: 0.4rem;
  overflow: hidden;
}

footer .footer-info {
  width: 2.8rem;
  text-align: center;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  font-style: italic;
  font-size: 2.6rem;
  color: #ffffff;
}

footer div div {
  position: relative;
  margin-right: -15.3rem;
  display: inline-block;
  border-radius: 0.4rem;
  padding: 0.6rem 0.8rem 0.6rem 0.2rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  color: #80a7e7;
  line-height: 1.6rem;
  transition: all 500ms ease-in-out;
}

@media only screen and (min-width: 576px) {
  footer div div {
    font-size: 1rem;
    margin-right: -18.5rem;
  }
}

footer:hover div div {
  margin-right: 0px;
}

footer a {
  margin-left: 0.2rem;
  color: #ffffff;
}

/* Calendar day positions and z-indexes */
.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-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-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-24 {
  grid-area: day24;
  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-24 {
    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: #1a535c;
  --candycane-red: #ff0054;
  --candycane-white: #ffffff;

  background-color: var(--candycane-background);
  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: #2b2d42;
  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: #64b6ac;
}

.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: #333533;
  --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: #66cafb;
}

.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: "Amatic SC", cursive;
  font-size: 3rem;
  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: #bee3db;
  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: #577399;
  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;
  background-color: #f1faee;
}

.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;
  background-color: #fefae0;
  height: 100%;
}

.jingle-bells {
  position: absolute;
  left: 0;
  width: 80%;
  height: 10rem;
  font-family: "FreeSerif Medium";
  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: #454545;
  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;
  }
}