* {
  box-sizing: border-box;
}

html,
body {
  --color: rgb(225 255 255 / 88%);
  position: relative;
  margin: 0;
  min-height: 100vh;

  display: grid;
  place-content: center;

  font: 300 21px/150% system-ui;
  font-size: clamp(1rem, 4vw, 1.36rem);

  hyphens: auto;
  word-break: break-word;

  background: #000;

  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
}

a,
a:active,
a:visited,
a:focus {
  padding: 0 .25em;
  background: var(--color);
  color: #000;
  border-radius: .1em;
  mix-blend-mode: screen;
  text-decoration: none;
  text-shadow: none;
}

a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

h1 {
  line-height: 1.2;
  letter-spacing: .05em;
  font-size: 1.8125em;
  font-weight: inherit;
  font-variant: small-caps;
  font-variant-caps: all-petite-caps;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

main {
  position: relative;
  border-radius: 0.25rem;
  width: clamp(16rem, -1rem + 90vw, 60rem);
  margin-block: clamp(1rem, -1rem + 4vh, 2rem);
  background: rgb(0 255 255 / 20%);
  box-shadow: 
    0 1px 2px 0 rgb(0 0 0 / 3%),
    0 2px 4px 0 rgb(0 0 0 / 5%),
    0 4px 8px 0 rgb(0 0 0 / 6%),
    0 8px 16px 0 rgb(0 0 0 / 7%),
    0 16px 32px 0 rgb(0 0 0 / 9%),
    0 32px 64px 0 rgb(0 0 0 / 12%);
}

#content {
  --pad-b: clamp(1rem, -1rem + 4vw, 2rem);
  --pad-i: clamp(2rem, -2rem + 10vw, 10rem);
  padding-left: var(--pad-i);
  padding-right: var(--pad-i);
  padding-top: var(--pad-b);
  padding-bottom: calc(4 * var(--pad-b));

  color: var(--color);

  text-shadow: 
    0.1em 0.1em 0 rgb(0 0 0 / 3%),
    0 0.125em 0 rgb(0 0 0 / 5%);
}

.ex-point {
  opacity: 0;
  
  animation: fade-in 4s ease-in-out forwards 2s;
}

.emoji {
  display: inline-block;
  transform: scaleX(-1);
  transform-origin: 50% 100%;
  filter: grayscale(1);
  opacity: 1;
  
  mix-blend-mode: color-dodge;
  
  animation: wiggle 4s ease-in-out forwards 2s;
}

@keyframes wiggle {
  0% {
    transform: scaleX(-1) rotate(0);
  }
  10% {
    transform: scaleX(-1) rotate(15deg);
  }
  20% {
    transform: scaleX(-1) rotate(0);
  }
  30% {
    transform: scaleX(-1) rotate(10deg);
  }
  40% {
    transform: scaleX(-1) rotate(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}