/* halfbakedlab — shared look: black, white, bold Inter, with titles in Bricolage Grotesque. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/inter-latin-700-normal.woff2") format("woff2");
}

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

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/shared/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}

:root {
  --font-title: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --faint: #2a2a2a;
  --good: #4ade80;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Title text on every page. Add the .title-font class to anything else that's a title. */
h1,
h2,
.title-font {
  font-family: var(--font-title);
}

a {
  color: inherit;
}

a:hover {
  color: var(--dim);
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 16px;
}

.footer {
  margin-top: 64px;
  color: var(--dim);
  font-size: 13px;
}

.footer a {
  color: var(--dim);
}

.footer a:hover {
  color: var(--fg);
}