kontrakurs.org/css/style.css

/* variables */
:root {
	--font-size: 12pt;
  --line-height: 1.625;
  --font-family: serif;

  /* font-derived width and height units */
  --w-un: 1ch;
  --h-un: calc(var(--font-size) * var(--line-height));

  /* font-derived max text width */
  --text-w: clamp(60ch, 72ch, 100vw);

  /* colors */
  --fg-c: light-dark(#000000, #fff);
  --bg-c: light-dark(#fff, #000000);
	--link-c: light-dark(hsl(240 100% 50%), hsl(240 100% 75%));
	--visited-c: light-dark(hsl(270 100% 50%), hsl(270 100% 75%));
	--active-c: light-dark(hsl(0 100% 50%), hsl(0 100% 75%));
}

/* reset */
/* box-sizing */
:root {
  box-sizing: border-box;
}

* {
	box-sizing: inherit;
  hyphens: auto;
}

/* margin */
* {
  margin: unset;
}

/* :root */
:root {
  color: var(--fg-c);
  background-color: var(--bg-c);
  color-scheme: light dark;
  font: var(--font-size)/var(--line-height) var(--font-family);
}

/* content sectioning */
address {
  font-style: unset;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-size: unset;
  font-weight: bold;
}

article {
  max-width: var(--text-w);
  counter-reset: heading;
}

article :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 1em;
}

article h1:before {
	content:
    counter(heading)". ";
	counter-increment: heading;
}

article h1 {
	counter-reset: subheading;
}

article h2:before {
	content:
    counter(heading)"."
    counter(subheading)". ";
	counter-increment: subheading;
}

article h2 {
  counter-reset: subsubheading;
}

article h3:before {
  content:
    counter(heading)"."
    counter(subheading)"."
    counter(subsubheading)". ";
  counter-increment: subsubheading;
}

article h3 {
  counter-reset: subsubsubheading;
}

article h4:before {
  content:
    counter(heading)"."
    counter(subheading)"."
    counter(subsubheading)"."
    counter(subsubsubheading)". ";
  counter-increment: subsubsubheading;
}

article h4 {
  counter-reset: subsubsubsubheading;
}

article h5:before {
  content:
    counter(heading)"."
    counter(subheading)"."
    counter(subsubheading)"."
    counter(subsubsubheading)"."
    counter(subsubsubsubheading)". ";
  counter-increment: subsubsubsubheading;
}

article h5 {
  counter-reset: subsubsubsubsubheading;
}

article h6:before {
  content:
    counter(heading)"."
    counter(subheading)"."
    counter(subsubheading)"."
    counter(subsubsubheading)"."
    counter(subsubsubsubheading)"."
    counter(subsubsubsubsubheading)". ";
  counter-increment: subsubsubsubsubheading;
}

article>* {
  max-width: 100%;
}

div>* {
  max-width: 100%;
}

/* text content */

:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) +
:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) {
  margin-block-start: var(--h-un);
}

blockquote {
  margin-inline: calc(4 * var(--w-un));
}

p {
  text-align: justify;
}

pre {
  margin-inline: var(--w-un);
  padding-inline: var(--w-un);
  padding-block: calc(0.5 * var(--h-un));
  color: var(--bg-c);
  background-color: var(--fg-c);
  overflow-x: scroll;
}

ol, ul, menu {
  padding-inline-start: calc(4 * var(--w-un));
}

:is(ol, ul, menu) :is(ol, ul, menu) {
  margin-block: unset;
}

hr {
  color: unset;
  border: unset;
  margin-block: calc(0.5 * var(--h-un));
  border-top: var(--fg-c) solid 0.1pt;
}

/* inline text semantics */
a {
  cursor: pointer;
  text-decoration: underline;
}

a:link {
  color: var(--link-c);
}

a:link:active {
  color: var(--active-c);
}

a:visited {
  color: var(--visited-c);
}

a:visited:active {
  color: var(--active-c);
}

/* image and multimedia */
:is(audio, img, video) {
  display: block;
  max-width: 100%;
}

/* embedded content */
:is(embed, iframe, object, picture, portal, source) {
  display: block;
  max-width: 100%;
}

/* svg */
svg {
  display: block;
  max-width: 100%;
}

/* scripting */
canvas {
  display: block;
  max-width: 100%;
}

/* forms */
fieldset {
  padding-block: var(--h-un);
  padding-inline: var(--w-un);
  border: var(--fg-c) groove 1pt;
  overflow: clip;
  max-width: 100%;
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  display: block;
  padding: unset;
  border: unset;
  font: unset;
  font-family: monospace;
  width: 100%;
  border-bottom: var(--link-c) solid 1pt;
}

input:focus {
  outline: unset;
  border-bottom: var(--active-c) solid 1pt;
}

input[type="submit"],
input[type="reset"] {
  display: block;
  padding: unset;
  font: unset;
  border: unset;
  background: unset;
  cursor: pointer;
  text-decoration: underline;
  color: var(--link-c);
}

input[type="submit"]:active,
input[type="reset"]:active {
  color: var(--active-c);
}

textarea {
  width: 100%;
  border: unset;
  font: unset;
  font-family: monospace;
  border: var(--link-c) solid 1pt;
}

textarea:focus {
  outline: unset;
  border: var(--active-c) solid 1pt;
}


/* layout */
body {
  max-width: var(--text-w);
  height: 100vh;
  margin: 0 auto;
  padding: var(--h-un) var(--w-un);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: calc(0.5 * var(--h-un));
}

body>header {
  padding-bottom: calc(0.5 * var(--h-un));
  border-bottom: var(--fg-c) solid 1pt;
}

body>footer {
  padding-top: calc(0.5 * var(--h-un));
  border-top: var(--fg-c) solid 1pt;
}

main {
  overflow-y: scroll;
}

.error {
  color: var(--active-c);
}