@font-face {
  font-family: "ChopinScript";
  src: url("../font/ChopinScript.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fantasque";
  src: url("../font/Fantasquenerdcustom.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paper-Snowflakes";
  src: url("../font/Paper-Snowflakes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html {
  background: #B3000C repeat url("../img/background.webp");
  font-size: 32px;
  min-width: 800px;
}
a {
  color: inherit;
  text-decoration: underline;
}
a:hover, a:active {
  text-decoration: unset;
}
i {
  color: #FF79C6;
  font-style: normal;
}
h1 {
  font-family: "ChopinScript", serif;
  font-size: 2.8em;
  margin: 0;
  padding: 0;
  line-height: 1.1em;
}
.label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  padding-top: 25px;
  text-shadow: #B3000C 1px 0 10px;
}
.countdownContainer {
  rotate: 4deg;
  color: white;
  background: repeating-linear-gradient(
    45deg,
    #386641,
    #386641 10px,
    #bc4749 10px,
    #bc4749 20px
  );
  width: 550px;
  text-align: left;
  padding: 10px;
  border: solid 1px #030303;
  box-shadow: #030303 0 0 10px;
  margin-top: 50px;
}
.tape, .tape2 {
  position: relative;
  rotate: 145deg;
  background-color: rgba(255, 255, 228, 0.48);
  height: 25px;
  width: 150px;
}
.tape {
  left: -60px;
}
.tape2 {
  float: inline-end;
  left: 60px;
}
.bow {
  float: inline-end;
  height: 150px;
  width: 160px;
}
.countdown {
  font-family: "Fantasque";
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}
.countdown div {
  font-size: 1.5em;
  margin-left: 15px;
}
.countdown span {
  line-height: 2em;
  font-size: 0.8em;
  font-family: "ChopinScript", serif;
  font-weight: 800;
}
/* Christmas only styles */
.countdown > .merry-christmas {
  font-size: 1.2em;
  padding-top: 5px;
  text-align: center;
}
.merry-christmas {
  unicode-bidi: plaintext;
  text-align: center;
}
.emoji {
  unicode-bidi: plaintext;
  display: inline-block;
}
/* Snowflakes */
.snowflake {
  font-family: "Paper-Snowflakes";
  color: #fff;
  font-size: 2em;
}
.snowflake {
  position: fixed;
  font-size: 0.8em;
  top: -10%;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
.snowflake:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s }
.snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s }
.snowflake:nth-of-type(2) { left: 20%; animation-delay: 6s, .5s }
.snowflake:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s }
.snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s }
.snowflake:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s }
.snowflake:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s }
.snowflake:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s }
.snowflake:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s }
.snowflake:nth-of-type(9){left:90%; animation-delay:3s,1.5s}
/* Credits */
footer {
  background-color: rgba(33, 33, 33, 0.85);
  font-family: "Fantasque";
  text-align: right;
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 0.4em;
  color: white;
  padding: 5px;
  line-height: 0.75em;
}
footer p {
  padding: 5px;
  margin: 0;
}
/* Animations */
@-webkit-keyframes snowflakes-fall {
  0% { top: -10% }
  100% { top: 100% }
}
@-webkit-keyframes snowflakes-shake {
  0% { -webkit-transform: translateX(0px); transform: translateX(0px) }
  50% { -webkit-transform: translateX(80px); transform: translateX(80px) }
  100% { -webkit-transform: translateX(0px); transform: translateX(0px) }
}
@keyframes snowflakes-fall {
  0% { top: -10% }
  100% { top: 100% }
}
@keyframes snowflakes-shake {
  0% { transform: translateX(0px) }
  50% { transform: translateX(80px) }
  100% { transform: translateX(0px) }
}