@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  --ground: #0b0b0c;
  --ink: #ededec;
  --muted: #b0b0b4;
}

* { box-sizing: border-box; }

html {
  background: var(--ground);
  scrollbar-color: var(--muted) var(--ground);
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 28px;
  color: var(--ink);
  font: 400 18px/1.65 "IBM Plex Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--ground); }

main { width: min(100%, 500px); }

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 38px;
  font: 400 56px/1 Newsreader, Georgia, serif;
  letter-spacing: -0.025em;
}

.brand img { width: 44px; height: 44px; }

p {
  margin: 0;
  max-width: 45ch;
  color: var(--muted);
  text-wrap: pretty;
}

@media (max-width: 600px) {
  body { font-size: 16px; padding: 40px 28px; }
  .brand { font-size: 52px; margin-bottom: 32px; }
  .brand img { width: 42px; height: 42px; }
}

@media (max-height: 460px) {
  body { padding-block: 24px; }
  .brand { margin-bottom: 24px; }
}