/* ffflllllooooooo / style.css
   written by hand. no framework was harmed.
   if something looks off, it is probably on purpose. probably. */

html { background: #efede6; color: #0b0b0b; }

body {
  font: 19px/1.5 "Times New Roman", Times, serif;
  max-width: 34em;
  /* asymmetric on purpose. centred things are for brochures */
  margin: 3em auto 6em 11vw;
  padding: 0 1em;
}
@media (max-width: 700px) { body { margin-left: auto; font-size: 17px; } }

a { color: inherit; text-underline-offset: 2px; }
a:hover { background: #0b0b0b; color: #efede6; text-decoration: none; }
a:visited { text-decoration-style: wavy; }   /* already consumed */

::selection { background: #d40000; color: #efede6; }

h1, h2, h3, .meta, .zone, nav, footer, pre, code, table {
  font-family: "Courier New", Courier, monospace;
}
h1 {
  font-size: 2.1em; line-height: 1; font-weight: normal;
  letter-spacing: -0.04em;
  transform: rotate(-0.6deg);        /* the floor is not level */
  margin: 0.4em 0 0.2em -0.15em;
}
h2, h3 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 2.6em; }
h2::before, h3::before { content: "// "; color: #d40000; }

.meta { font-size: 13px; color: #6d6a62; }
.meta b { color: #d40000; font-weight: normal; }

pre {
  font-size: 13px; line-height: 1.35;
  overflow-x: auto;
  padding: 0.8em 0 0.8em 1em;
  border-left: 3px solid #0b0b0b;
}
code { font-size: 0.85em; }
pre code { font-size: inherit; }

img, iframe, canvas { max-width: 100%; display: block; margin: 1.6em 0; }
iframe { border: 0; width: 100%; aspect-ratio: 16/9; height: auto; }

table { border-collapse: collapse; font-size: 13px; margin: 1.5em 0; }
td, th { border: 1px solid #0b0b0b; padding: 0.2em 0.6em; }

hr { border: 0; text-align: left; margin: 3em 0; }
hr::after { content: "\\\\\\\\\\\\\\\\\\ \\\\\\\\ \\\\ \\"; letter-spacing: 0.3em; font-family: monospace; }

blockquote { margin-left: 0; padding-left: 1em; font-style: italic; border-left: 1px dashed #d40000; }

.footnotes { font-size: 14px; color: #6d6a62; }

/* --- home --- */

#clock { width: 100%; height: auto; margin: 0 0 0.5em -6px; }

.intro { margin: 1.5em 0 2.5em; }
.intro p { margin: 0.3em 0; }
.intro .red { color: #d40000; }

ul.tx { list-style: none; padding: 0; margin: 0; }
ul.tx li {
  display: grid;
  grid-template-columns: 5.5em 7em 1fr;
  gap: 0 0.6em;
  padding: 0.25em 0;
  border-bottom: 1px dotted #b8b4a9;
}
ul.tx .zone { font-size: 13px; padding-top: 0.25em; }
ul.tx time { font: 13px "Courier New", monospace; color: #6d6a62; padding-top: 0.25em; }
@media (max-width: 520px) { ul.tx li { grid-template-columns: 4.5em 1fr; } ul.tx time { display: none; } }

nav { font-size: 13px; margin-bottom: 2em; }
nav a { margin-right: 1em; }

footer { margin-top: 5em; font-size: 12px; color: #8b877d; }

/* a single blink. one. we are not animals */
.cursor::after { content: "_"; animation: b 1.1s steps(1) infinite; }
@keyframes b { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }