/* Ecca Labs: small additions on top of Pico (violet theme). */

:root {
  --ecca-neon-yellow: #ffd34a;
}

/* Pixel-art street scene, generated by art/backdrop/generate.py. */
body {
  background-color: #07040e;
  background-image: url("/assets/backdrop.jpg");
  background-image: image-set(url("/assets/backdrop.webp") type("image/webp"), url("/assets/backdrop.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--pico-color);
  text-decoration: none;
}

.brand img {
  width: 2rem;
  height: 2rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}

.hero .tagline {
  font-size: 1.35rem;
  color: var(--ecca-neon-yellow);
  margin-bottom: 1.5rem;
}

.hero p {
  max-width: 36rem;
}

/* Hero text sits on black strips that follow each wrapped line, like game subtitles. */
.hl {
  background: #000;
  color: var(--ecca-neon-yellow);
  padding: 0.05em 0.3em;
  line-height: 1.6;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero h1 .hl {
  line-height: 1.25;
}

.hl a {
  color: inherit;
}

body > footer {
  font-size: 0.875rem;
  color: var(--pico-muted-color);
}