* { box-sizing: border-box; }

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #000;
  font-family: "JetBrains Mono", ui-monospace, "Courier New", monospace;
}

.void {
  max-width: 640px;
  padding: 8vh 26px;
  text-align: center;
  animation: fade-in 1.2s ease both;
}

.tux {
  display: inline-block;
  margin: 0 0 28px;
  font-size: clamp(0.24rem, 1.3vw, 0.58rem);
  line-height: 1.1;
  white-space: pre;
  text-align: left;
  color: #bdbdbd;
}

.msg {
  margin: 0;
  font-weight: 400;
  font-size: clamp(0.8rem, 2.2vw, 1.1rem);
  line-height: 1.8;
  letter-spacing: 0.3px;
  text-wrap: balance;
  color: #d4d4d4;
}

.footer {
  margin-top: 28px;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  color: #707070;
}

::selection { background: #161616; color: #e8e8e8; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .void { animation: none; }
}