@font-face {
  font-family: "Overpass";
  src: url(fonts/Overpass-latin.woff2) format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Overpass Mono";
  src: url(fonts/OverpassMono-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F7F5EE;
  --ink: #1B1B1D;
  --accent: #C4452B;
  --sans: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-mode="night"] { --paper: #212A37; --ink: #E8E4DA; --accent: #E8573A; color-scheme: dark; }

/* Without the script there is no switch, so follow the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) { --paper: #212A37; --ink: #E8E4DA; --accent: #E8573A; color-scheme: dark; }
}

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

main {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.block {
  box-sizing: border-box;
  width: min(38rem, 100%);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.1rem);
  border: 2px solid var(--ink);
  text-align: center;
}

h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 0.3rem;
}

p {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin: 0;
  opacity: 0.85;
}

nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

nav a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  transition: color 120ms ease;
}

nav svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
nav a:hover { color: var(--accent); }
nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.fallback { padding: 0.75rem 0 0; color: var(--accent); font-size: 1rem; }

/* The day and night switch, top right: a 60 x 44 px target round a 60 x 24 box with the current mode's half filled. */
.mode {
  position: fixed; top: calc(clamp(0.75rem, 2vw, 2rem) - 10px); right: clamp(1rem, 3vw, 3rem);
  box-sizing: border-box; width: 60px; height: 44px; padding: 10px 0; margin: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}

html:not(.js) .mode { display: none; }
.mode svg { display: block; width: 60px; height: 24px; overflow: visible; }
.mode .case { fill: var(--paper); stroke: currentColor; }
.mode .on { fill: currentColor; }
.mode .rule { stroke: currentColor; }
.mode .sun, .mode .moon { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mode[aria-pressed="false"] .sun, .mode[aria-pressed="true"] .moon { stroke: var(--paper); }
.mode[aria-pressed="true"] .on { transform: translateX(29.5px); }
.mode:hover { color: var(--accent); }
.mode:focus-visible { outline: none; }
.mode:focus-visible svg { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .mode .on { transition: transform 160ms ease; }
}

@media (forced-colors: active) {
  .mode .case { fill: Canvas; stroke: ButtonText; }
  .mode .on { fill: ButtonText; }
  .mode .rule, .mode .sun, .mode .moon { stroke: ButtonText; }
  .mode[aria-pressed="false"] .sun, .mode[aria-pressed="true"] .moon { stroke: Canvas; }
}