@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Colours are taken from the pixel mark itself. */
:root {
  --bg: #1B1219;
  --ink-shadow: #3D2226;
  --text: #FDF6BF;
  --muted: #DDC597;
  --brass: #E5C05A;
  --spot-x: 50%;
  --spot-y: 36%;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* A flashlight on the case file, over a faint pixel dither. */
  background-image:
    radial-gradient(circle 440px at var(--spot-x) var(--spot-y), rgb(229 192 90 / 0.11), transparent 70%),
    repeating-conic-gradient(rgb(253 246 191 / 0.025) 0 25%, transparent 0 50%);
  background-size: auto, 4px 4px;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Pixelify's "fi" ligature reads as "A". */
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

.case {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 16px 24px;
  text-align: center;
}

.mark {
  width: 256px;
  height: 256px;
  image-rendering: pixelated;
  animation: hover 2.4s steps(2, jump-none) infinite alternate;
}

.mark-small {
  width: 128px;
  height: 128px;
}

.wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1;
}

.wordmark-name {
  font-size: clamp(3rem, 13vw, 5.75rem);
  letter-spacing: 0.02em;
  text-shadow: 0 0.06em 0 var(--ink-shadow);
}

.wordmark-sub {
  font-size: clamp(0.875rem, 3.2vw, 1.125rem);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-transform: uppercase;
  color: var(--brass);
}

.status {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 3.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
}

.caret::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.2em;
  vertical-align: -0.15em;
  background: var(--brass);
  animation: blink 1.1s steps(1) infinite;
}

.back {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid var(--brass);
  color: var(--brass);
  font-weight: 700;
  text-decoration: none;
}

.back:hover,
.back:focus-visible {
  background: var(--brass);
  color: var(--bg);
  outline: none;
}

.footer {
  padding: 24px 16px 32px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  opacity: 0.75;
}

/* Pixelify draws the copyright sign as a speck; borrow the system one. */
.copyright {
  font-family: system-ui, sans-serif;
}

@keyframes hover {
  to { transform: translateY(-6px); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (max-width: 320px) {
  .mark { width: 192px; height: 192px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .caret::after {
    animation: none;
  }
}