body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Press Start 2P", cursive;
}

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  display: flex;
  align-items: center;
}
.center .text-center {
  text-align: center;
  width: 100%;
}

h1 {
  display: inline-block;
  padding-right: 5px;
  border-right: 10px solid #fff;
  animation: blink 1s infinite;
}
@media screen and (max-width: 370px) {
  h1 {
    font-size: 5vw;
    border-right: 4px solid #fff;
  }
}

@keyframes blink {
  0% {
    border-right-color: transparent;
  }
  50% {
    border-right-color: transparent;
  }
  51% {
    border-right-color: #fff;
  }
  100% {
    border-right-color: #fff;
  }
}
canvas {
  background: #000;
  width: 100%;
  height: 100%;
}
html, body { margin: 0; background: #000; }
.text-center { box-sizing: border-box; padding: 24px; }
h1 { font-size: clamp(16px, 4vw, 36px); line-height: 1.8; overflow-wrap: anywhere; }
a { display: inline-block; padding: 16px; color: #fff; font-size: clamp(14px, 3vw, 22px); text-underline-offset: 6px; }
a:hover, a:focus-visible { color: #aaffaa; }
@media (prefers-reduced-motion: reduce) { h1 { animation: none; } }

.memories-link { font-size: clamp(10px, 2vw, 14px); line-height: 1.8; max-width: 32em; }

.artist-links a { font-size: 11px; line-height: 1.8; padding: 12px; }
.artist-summary { font: 12px/1.8 monospace; color: #bbb; max-width: 42em; margin: 12px auto; }
.center { overflow-y: auto; }
@media (max-height: 540px) { .center { align-items: flex-start; } }

.archive-link { font-size: 10px; line-height: 1.8; color: #999; padding: 12px; }

#particle-background { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.center { z-index: 1; pointer-events: none; }
.center a { pointer-events: auto; }
.text-center { text-shadow: 0 2px 8px #000, 0 0 24px #000; }