/* fithos — plain html styling. No classes needed.
   Write <h1>, <p>, <ul>, <nav> and it just works.
   Colors/fonts/layout: tweak the :root variables. */

:root {
  --bg: #000;
  --fg: #fff;
  --muted: #999;
  --link: #66aaff;
  --border: #222;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem;
  font-family: var(--font);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--fg);
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

/* top navigation */
header { margin-bottom: 1.25rem; }
nav a {
  margin-right: 0.9rem;
  color: var(--link);
  text-decoration: none;
}
nav a:hover { color: var(--fg); }

/* links: no underline until hover */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* headings */
h1, h2, h3 { line-height: 1.25; margin: 1.25rem 0 0.5rem; }
h1 { font-size: 1.6rem; margin-top: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.15rem; }

/* text */
p { margin: 0.6rem 0; }
a { color: var(--link); }
a:hover { color: var(--fg); }
strong { color: var(--fg); }
small, figcaption { color: var(--muted); font-size: 0.85rem; }

/* lists */
ul, ol { padding-left: 1.5rem; margin: 0.6rem 0; }
li { margin: 0.2rem 0; }

/* media */
img, audio, video {
  max-width: 100%;
  height: auto;
}
audio { width: 100%; display: block; margin: 0.25rem 0; }

/* quotes */
blockquote {
  margin: 0.75rem 0;
  padding-left: 1rem;
  border-left: 3px solid #444;
  color: #ddd;
}

/* code */
pre {
  background: #111;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 4px;
}
code {
  background: #111;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.85em;
}
pre code { background: none; padding: 0; }

hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

table { border-collapse: collapse; margin: 0.75rem 0; }
th, td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: left; }

/* highlight the page you're on in the nav */
nav a[aria-current] { color: var(--fg); text-decoration: none; }

@media (max-width: 480px) {
  body { padding: 2rem 1rem; }
}