:root {
  --red: rgb(150, 25, 17);
  --red-dark: rgb(112, 8, 8);
  --black-50: rgba(20, 20, 20, 0.5);
  --text-shadow-default: 0.1rem 0.1rem 0 var(--black-50);

  --door-width: 7rem;
  --gap: 2rem;
  --card-border-radius: 4.75% / 3.5%;
  --white: rgb(245, 245, 245);
  --white-25: rgba(255, 255, 255, 0.25);
  --gold-light: rgb(255, 205, 113);
  --gold-light-50: rgba(255, 205, 113, 0.5);
  --gold: rgb(253, 169, 47);
  --gold-red: rgb(208, 123, 27);
  --blue-light: rgb(171, 233, 255);
  --blue: rgb(53, 192, 215);
  --blue-dark: rgb(0, 116, 178);

  --bg-blue: radial-gradient(
    var(--blue-dark),
    var(--blue) 70%,
    var(--blue-light)
  );
  --bg-gold: linear-gradient(
    0.49turn,
    var(--gold) 40%,
    var(--gold-light) 48%,
    var(--gold-light) 52%,
    var(--gold),
    var(--gold-red) 60%
  );
  --bg-gold-shine: radial-gradient(
    var(--white),
    var(--gold-light) 50%,
    var(--gold) 80%
  );
  --perspective: 700px;
  --bg-gold-bar: radial-gradient(
    circle at center,
    var(--gold-red),
    var(--gold-light) 50%,
    var(--gold) 80%
  );
}

@font-face {
  font-family: 'AmaticSC';
  src: url('AmaticSC-Regular.ttf');
}

@font-face {
  font-family: 'YoungSerif';
  src: url('YoungSerif-Regular.ttf');
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-family: 'AmaticSC', sans-serif;
  font-size: 1rem;
  min-height: 100%;
  text-align: center;
  background: radial-gradient(var(--red), var(--red-dark));
  color: var(--gold-light);
}
@media screen and (max-device-width: 640px) {
  html {
    font-size: 0.4rem;
  }
  :root {
    --door-width: 12rem;
  }
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  place-items: center;
}
button {
  font: inherit;
  font-weight: bold;
  font-size: 2.5rem;
  min-width: 1em;
  padding: 0.08em 0.4em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none !important;
  transition: all 100ms ease-out;
  transform-origin: bottom center;
  background: var(--bg-blue);
  color: var(--white);
  border: none;
  outline: 0.05em solid var(--white-25);
  outline-offset: -0.05em;
  border-radius: 0.16em;
  box-shadow:
    0 0.13em 0.06em var(--blue),
    0 0.13em 0 var(--blue-dark);
  text-shadow: var(--text-shadow-default);
  margin-bottom: 0.13em;
}
.frosted:before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 11%;
  width: 4%;
  aspect-ratio: 1/2.5;
  background: linear-gradient(var(--white) 80%, var(--blue-light));
  box-shadow:
    0 0.05em 0.05em var(--blue-light),
    0 0.1em 0 var(--blue);
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 20%;
}
.frosted:after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 15%;
  width: 4%;
  aspect-ratio: 1/6;
  background: linear-gradient(var(--white) 80%, var(--blue-light));
  box-shadow:
    0 0.05em 0.05em var(--blue-light),
    0 0.1em 0 var(--blue);
  border-bottom-left-radius: 70%;
  border-bottom-right-radius: 30%;
}
button:hover {
  translate: 0 0.07em;
  box-shadow:
    0 0.06em 0.06em var(--blue),
    0 0.06em 0 var(--blue-dark);
}
button:active {
  box-shadow: none;
  translate: 0 0.16em;
  filter: brightness(1.1);
}
#title-wrapper {
  position: relative;
  width: 100%;
}
#toggle-snow {
  position: absolute;
  top: calc(50% - 0.8em);
  right: 1em;
  font-weight: normal;
}
#title {
  background: var(--bg-gold-bar);
  box-shadow: 0 0.4rem 0 0 var(--gold-red);
  filter: saturate(1.1);
}
h1 {
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: var(--text-shadow-default);
}

.calendar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 0 var(--gap) 4rem;
  max-width: min(100%, calc((var(--door-width) + var(--gap)) * 6));
  justify-content: center;
}

.card {
  perspective: var(--perspective);
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 61/85;
  justify-content: center;
  align-items: center;
  min-width: var(--door-width);
  border-radius: var(--card-border-radius);
  font-size: 6rem;
  outline: 2px dashed var(--gold-light-50);
  outline-offset: -2px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    scale,
    scale 500ms;
}
.card .day {
  background: var(--bg-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: bold;
  filter: drop-shadow(var(--text-shadow-default));
  pointer-events: none;
}
.card:hover {
  cursor: pointer;
  transition: scale 50ms;
  scale: 1.1;
  outline: none;
}
.card:hover .door {
  background: var(--bg-gold-shine);
}
.card:hover .day,
.open .day {
  background: radial-gradient(var(--red), var(--red-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.day-overlay {
  pointer-events: none;
}
.open .day-overlay {
  z-index: 1;
  font-weight: bold;
  color: var(--white);
  background: radial-gradient(closest-side, var(--gold-red), transparent);
  padding: 1rem;
  text-shadow: var(--text-shadow-default);
  pointer-events: none;
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 61/85;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.door,
figure,
img {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  border-radius: var(--card-border-radius);
}
figure {
  display: none;
}
.open figure {
  display: revert;
}
img {
  font-size: 2rem;
}
.open img {
  pointer-events: all;
  cursor: zoom-in;
}

@keyframes open {
  0% {
    rotate: y 0deg;
  }
  100% {
    rotate: y -90deg;
  }
}
.open .door {
  background: var(--bg-gold-shine);
  transform-origin: center left;
  animation: open 1.5s forwards;
}

.highlight {
  position: fixed;
  height: 100%;
  width: 100%;
  scale: 0.01;
  z-index: 1;
  cursor: zoom-out;
  transform-style: preserve-3d;
}

.highlight .img-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: var(--card-border-radius);
  /*remove all rogue whitespaces*/
  font-size: 0;
}
.highlight img {
  position: static;
  height: auto;
  width: auto;
  max-height: 80vh;
  max-width: 80vw;
}
@keyframes pop-in {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}
@keyframes pop-out {
  0% {
    scale: 1;
  }
  100% {
    scale: 0;
  }
}
.pop-in {
  animation: pop-in 350ms forwards;
}
.pop-out {
  animation: pop-out 350ms forwards;
}

@keyframes snow {
  0% {
    transform: translate(0, 0) rotateZ(calc(var(--rotation) * 1turn))
      scale(calc(1 - var(--scale-mod)));
  }
  100% {
    transform: translate(calc(20vw * var(--drift)), 110vh)
      rotateZ(calc(var(--rotation) * 1turn)) scale(calc(1 - var(--scale-mod)));
  }
}
#snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.snowflake {
  position: absolute;
  --start-x: 50%;
  --speed: 1;
  --drift: 0;
  --rotation: 0;
  --opacity: 1;
  --scale-mod: 0;
  opacity: var(--opacity);
  top: -2vh;
  translate: -50% -50%;
  left: var(--start-x);
  color: var(--white);
  font-size: 2rem;
  animation: calc(6s + (4s * var(--speed))) linear calc(10s * var(--speed)) snow
    infinite;
}
.hide {
  display: none;
}
a {
  text-decoration: none;
  color: var(--gold-light);
}
a:hover {
  text-decoration: underline;
}
#copyright {
  font-size: 2rem;
  font-weight: bold;
  text-shadow: var(--text-shadow-default);
  color: var(--white);
}
#fan-content-policy {
  font-family: system-ui;
  font-size: 0.75rem;
  margin: 0;
  padding: 1rem;
  color: var(--black-50);
}
#dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black-50);
}
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  padding: 0.5em 1em;
  background: var(--bg-blue);
  font-size: 3rem;
  font-weight: bold;
  color: var(--white);
  text-shadow: var(--text-shadow-default);
  border-radius: 0.16em;
  border: none;
  outline: 0.05em solid var(--white-25);
  outline-offset: -0.05em;
  box-shadow:
    0 0.26em 0.13em var(--blue),
    0 0.26em 0 var(--blue-dark);
}
dialog p {
  margin: 0 0 0.25em;
}
.date {
  background: var(--bg-gold-bar);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  font-size: 1.5em;
  filter: drop-shadow(0.1rem 0.1rem 0 var(--gold-red))
    drop-shadow(0 0 0.2em var(--gold-light-50));
}
dialog button {
  position: relative;
}