@font-face {
  font-family: "E4 Display";
  src: url("/assets/racing-sans-one.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: dark;
  background: #242527;
  color: #d5d5bc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px;
}
h1 {
  display: flex;
  align-items: baseline;
  gap: .22em;
  margin: 0;
  font: 400 clamp(56px, 12.6vw, 172px)/1 "E4 Display", sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.wordmark {
  display: inline-block;
  transform: scaleX(1.13);
  transform-origin: left center;
  margin-right: .34em;
}
.indicator {
  display: block;
  flex: 0 0 .365em;
  height: .42em;
  align-self: center;
  margin-top: .22em;
  background: #912925;
  transform: skewX(-12deg);
  animation: low-fuel 4.8s infinite;
}
@keyframes low-fuel {
  0%, 18%, 77%, 100% { opacity: .45; box-shadow: 0 0 0 transparent; }
  38%, 52% { opacity: 1; box-shadow: 0 0 .09em .015em #91292540, 0 0 .27em .055em #91292520; }
}
@media (prefers-reduced-motion: reduce) {
  .indicator { animation: none; opacity: 1; }
}