/* -------------- */
/* FONT: mononoki */
/* -------------- */
@font-face {
  font-family: 'mononoki';
  src: url('fonts/mononoki-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mononoki';
  src: url('fonts/mononoki-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'mononoki';
  src: url('fonts/mononoki-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;

}

@font-face {
  font-family: 'mononoki';
  src: url('fonts/mononoki-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}

/* ----------------------------- */
/* COLORS: quasi-solarized theme */
/* ----------------------------- */
:root {
  --base03: #0D2B1E;
  --base02: #1A362A;
  --base01: #5C6F5F;
  --base00: #687C6B;
  --base0: #839584;
  --base1: #92A291;
  --base2: #EBE9D3;
  --base3: #fdf6e3;
  --yellow: #B69200;
  --orange: #C76C1C;
  --red: #BD4026;
  --magenta: #B53775;
  --violet: #9D40DD;
  --blue: #4268CA;
  --cyan: #00997A;
  --green: #5E9500;

  --background: var(--base3);
  --background-accent: var(--base2);
  --main-text: var(--base01);
  --greyed-out-text: var(--base0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--base03);
    --background-accent: var(--base02);
    --main-text: var(--base1);
    --greyed-out-text: var(--base00);
  }

  #low-png {
    content: url(low_light.png);
  }
}

/* -------------------- */
/* DIMENSIONS AND SIZES */
/* -------------------- */
:root {
  --unit: clamp(3.2px, 1vw, 5px);
  --v-unit: clamp(3.2px, 1vw, 10px);

  --v-space: calc(1rem + (3 * var(--v-unit)));
  --col-width: calc(90 * var(--unit));
  --col-gap: calc(10 * var(--unit));
}

@media (min-width: 720px) {
  :root {
    --unit: min(1vw, 10px);
    --col-width: calc(40 * var(--unit));
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: mononoki;
  font-size: 16px;
  color: var(--main-text);
  background-color: var(--background-accent);

  margin: 0;
}

.container {
  display: flow-root;
  background-color: var(--background);
  width: calc(100 * var(--unit));
  margin-inline: auto;
  padding-inline: calc(5 * var(--unit));
}

.headline {
  display: flow-root;

  font-size: calc(1.2rem + (.2 * var(--v-unit)));
  color: var(--orange);
  text-align: center;

  margin-block-end: calc(1.5 * var(--v-space));
}

.headline h1 {
  font-weight: normal;
  font-size: calc(3rem + (5 * var(--v-unit)));
  margin-block-start: var(--v-space);
  margin-block-end: 0;
}

.grid {
  display: grid;
  justify-content: center;
  place-items: center;
  grid-template-columns: repeat(auto-fit, var(--col-width));
  row-gap: var(--v-space);
  column-gap: var(--col-gap);
}

.span-all {
  grid-column: 1 / -1;
}

a {
  color: var(--green);
  text-decoration: none;
  transition: color 400ms ease;
}

a::before {
  content: '\2192';
  padding-right: .5ch;
}

a:hover,
a:focus {
  color: var(--red);
  transition: color 200ms ease;
}

.top-link {
  display: inline-block;
  padding: .5em .75em;
  border: .12em solid;
  border-radius: 3px;
}

.half-gap {
  margin-bottom: calc(-.5 * var(--v-space));
  align-self: start;
}

.dropcap {
  color: var(--orange);
  float: left;
}

.droptext::first-letter {
  color: #0000;
  margin-left: -1ch;
}

.wingdings {
  font-size: 200%;
  color: var(--greyed-out-text);
  justify-self: start;
}

code {
  font-family: mononoki;
  white-space: pre;
}

/* code highlights */
.keyword {
  color: var(--orange);
}

.built_in {
  color: var(--red);
}

.string {
  color: var(--green);
}

.number {
  color: var(--yellow);
}

.comment {
  color: var(--greyed-out-text);
  font-style: italic;
}

/* --------------- */

.monospaced-title {
  font-size: 300%;
}

.monospaced-title .accent {
  color: var(--background);
  background-color: var(--main-text);
  border-radius: 3px;
}

.resolution-title {
  text-align: center;
}

.resolution-title .high {
  font-size: 275%;
}

.differentiation-title {
  text-align: center;
}

.differentiation-title .example {
  font-size: 300%;
  color: var(--greyed-out-text);
}

.donation {
  color: var(--orange);
  text-align: center;
  max-width: 450px;
}

.showcase-title {
  text-align: center;
  margin-block: 1rem;
}

.showcase {
  color: var(--greyed-out-text);
  line-height: 1.7rem;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

footer {
  color: var(--greyed-out-text);
  text-align: center;
  margin-block-start: calc(1.5 * var(--v-space));
  margin-block-end: 1rem;
}