@import "/iosevka-webfont/iosevka-ss17.css";

@media (prefers-color-scheme: light) {
  :root {
    --title: #475f7a;
    --subtitle: #7688a4;
    --header: #3d70be;
    --h3-blue: #2f6aa4;
    --nav-header: #677489;
    --method-title: #133372;
    --description-code: #334da1;
    --faded: #cececf;
    --almost-invisible: #dddddf;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --title: #a3adbe;
    --subtitle: #7f8eac;
    --header: #abc9ef;
    --h3-blue: #50a3e9;
    --nav-header: #8c9bac;
    --method-title: #cbdde4;
    --description-code: #abcdef;
    --faded: #38384a;
    --almost-invisible: #29293a;
  }
}

.page {
  min-height: calc(100% - 18em);
  margin: 0 auto 160px;
  width: 900px;
}

.page::after {
  content: "";
  display: table;
  clear: both;
}

header {
  padding: 0;
  background-color: unset;
  color: var(--body-fg);
  border-bottom: 1px solid var(--faded);
}

header .page {
  height: 8em;
  margin-bottom: 0;
}

header h1 {
  position: absolute;
  left: 0;
  top: calc((8em / 3) - 0.6em);
  padding: 0;
  margin: 0;
  color: var(--title);
  font: 700 40px "Rokkitt";
  letter-spacing: 2px;
  text-align: left;
}

header h2 {
  position: absolute;
  left: 0;
  top: calc(8em - 0.6em);
  padding: 0;
  margin: 0;
  color: var(--subtitle);
  font: 500 18px "Rokkitt";
  text-align: left;
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid var(--almost-invisible);
}

main {
  margin-top: 30px;
  float: left;
}

.main-column, main {
  width: 660px;
  position: relative;
}

h2 {
  margin: 24px 0 4px 0;
  color: var(--header);
  font-family: "Rokkitt";
  font-weight: 500;
}

h3 {
  margin-bottom: 12px;
  margin-top: 28px;
  font: 400 20px "Rokkitt";
  color: var(--h3-blue);
}

dl {
  margin: 12px 0 16px 0;
}

.methods > dt {
  margin-bottom: 6px;
  color: var(--method-title);
  font: 300 17px "Iosevka SS17 Web";
}

.methods > dd {
  margin-left: 12px;
  margin-bottom: 16px;
}

dd > p {
  margin-top: 6px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-weight: 300;
}

dd > p > code {
  color: var(--description-code);
  font: 400 16px "Iosevka SS17 Web";
}

nav {
  margin-top: 30px;
  float: right;
  width: 160px;
}

nav h2 {
  text-transform: uppercase;
  color: var(--nav-header);
  font: 500 14px "Fira Sans";
  letter-spacing: 1px;
  margin: 0;
}

nav ul {
  margin: 6px 0 20px 0;
  padding: 0;
  font-weight: 300;
  font-size: 16px;
}

nav li {
  list-style-type: none;
  margin: 0 0 4px 0;
}