/*
 * css styling for kontrakurs.org
 */

/* variables */

:root {
  --text-width: min(72ch, round(down, calc(100vw - 4ch), 2ch));

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

  /* 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 */

:root {
  box-sizing: border-box;
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

*, 
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}


/* root, * */

:root {
  color: var(--fg-c);
  background-color: var(--bg-c);
  font-family: serif;
  line-height: 1.625;
  overflow-wrap: break-word;
}

*,
*::before,
*::after {
  font: inherit;
  scrollbar-width: none;
}

::selection {
  color: var(--bg-c);
  background-color: var(--fg-c);
}


/* content sectioning */

h1, h2, h3, h4, h5, h6 {
  margin-top: 2rlh;
  font-weight: bold;
  text-wrap: balance;
}


/* text content */

blockquote, code, div, dl, figure, hr, ol, p, pre, ul {
  margin-top: 1rlh;
}

blockquote {
  margin-inline: 4ch;
}

hr {
  color: unset;
  border: unset;
  margin-block: 1rlh;
  border-top: var(--fg-c) solid 0.1pt;
}

ul, ol {
  list-style-position: inside;
}

ul ul, ol ul {
  margin-inline: 4ch;
}

ol ol, ul ol {
  margin-inline: 4ch;
}

p {
  hyphens: auto;
  text-align: justify;
  text-wrap: wrap;
}

code, pre {
  font-family: monospace;
  overflow-x: scroll;
}


/* 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);
}

em { font-style: italic; }

strong { font-style: bold; }

/* image and multimedia */

img {
  display: block;
  max-width: 100%;
  max-height: 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 {
  margin: 2rlh auto;
  width: var(--text-width);
}

body>main,
body>footer {
  margin-top: 2rlh;
}

nav.backlinks {
  margin-top: 2rlh;
}

div.footnotes {
  margin-top: 2rlh;
}

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