/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --argon: "Monaspace Argon Var";
  --krypton: "Monaspace Krypton Var";
  --neon: "Monaspace Neon Var";
  --radon: "Monaspace Radon Var";
  --xenon: "Monaspace Xenon Var";

  --bg: black;
  --fg: dimgray;
  --bw: .75vw;
}

html {
  font-family: var(--neon), ui-monospace, monospace;
  font-variation-settings: "wght" 400;
  line-height: 1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 4.5vw;
  color: var(--fg);
  background-color: var(--bg);
}

body > div,
body > hr {
  display: block;
  border: none;
  height: 1vw;
  background-color: var(--fg);
  margin: 4.6125vw 6.75vw;
}

body.lab {
  --bg: black;
  --fg: dimgray;
}

body.lab.light {
  --bg: #393e41;
  --fg: #d3d0cb;;
}

body.frg {
  --bg: #1d0c0f;
  --fg: #771825;
}

body.frg.light {
  --bg: #481d24;
  --fg: #e66337;
}

body.scp {
  --bg: #080e20;
  --fg: #3a506b;
}

body.scp.light {
  --bg: #253156;
  --fg: #afc0d4;
}

body.hwy {
  --bg: #0a0114;
  --fg: #392768;
}

body.hwy .lit {
  --fg: #856bc7;
}

body.brg {
  --bg: #020202;
  --fg: #04471c;
}

body.brg.light {
  --bg: #0d2818;
  --fg: #058c42;
}

body.arc {
  --bg: #1b0d15;
  --fg: #5d2e46;
}

body.arc.light {
  --bg: #5d2e46;
  --fg: #d0ada7;
}



/* BLUE */
/*body.mc {*/
/*  --bg: #495867;*/
/*  --fg: #bdd5ea;*/
/*}*/

/*body.mc.light {*/
/*  --bg: #577399;*/
/*  --fg: #f7f7ff;*/
/*}*/

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: inherit;
  /*padding-bottom: 1.5vw;*/
}

h1 {
  /*text-align: center;*/
  font-variation-settings: "wght" 475;
}

h5 {
  /*text-align: center;*/
  font-variation-settings: "wght" 325;
}

h2 {
  font-variation-settings: "wght" 800;
}

h3 {
  /*font-family: var(--xenon), monospace;*/
  font-variation-settings: "wght" 600;
}

h3 > span:first-child {
  padding-right: 1ch;
}

h4 {
  /*text-align: center;*/
  /*font-family: var(--), monospace;*/
  font-variation-settings: "wght" 200;
}

h6 {
  font-family: var(--radon), ui-monospace, monospace;
  font-variation-settings: "wght" 200;
}

header, section, footer {
  margin-left: 6.75vw;
  margin-right: 6.75vw;
}

header {
  margin-top: 7.875vw;
  /*padding-bottom: 4.5vw;*/
  /*border-bottom: var(--bw) solid var(--fg);*/
}

header > * + * {
  margin-top: 2.25vw;
}

section > div,
section > hr {
  height: 1px;
  display: block;
  border: none;
  background-color: var(--fg);
  margin: 4.5vw 0;
  opacity: .25;
}


footer {
  margin-bottom: 7.875vw;
  /*margin-top: 2.25vw;*/
  /*padding-top: 4.5vw;*/
  /*padding-bottom: 7.875vw;*/
  /*border-top: var(--bw) solid var(--fg);*/
  /*font-family: var(--radon), ui-monospace, monospace;*/
  /*font-feature-settings: "wght" 600;*/
  /*font-weight: 200;*/
}

section {
  /*padding-top: 4.5vw;*/
  /*padding-bottom: 2.25vw;*/
}

article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav {
  /*border-top: var(--bw) solid var(--fg);*/
  /*padding-top: 4.5vw;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

p {
  /*padding-bottom: 1.5vw;*/
  /*font-family: var(--radon), ui-monospace, monospace;*/
  /*font-variation-settings: "wght" 200;*/
}

em {
  font-family: var(--radon), ui-monospace, monospace;
  font-variation-settings: "wght" 200;
  /*text-transform: uppercase;*/
  font-style: normal;
}

span {
  font-family: var(--krypton), ui-monospace, monospace;
  font-variation-settings: "wght" 600;
  display: inline-block;
}

strong {
  font-weight: normal;
  font-feature-settings: "ss05", "ss04";
}

a, a:visited {
  color: var(--fg);
  display: block;
  text-decoration: none;
  /*padding-bottom: 1.5vw;*/
  font-variation-settings: "wght" 475;
}

a::after {
  position: relative;
  top: -2px;
}

a.frwd::after {
  display: inline-block;
  font-feature-settings: "ss03";
  padding-left: 1ch;
  content: "->";
}

a.frwd {
  margin-left: auto;
}

a.back::before {
  display: inline-block;
  font-feature-settings: "ss03";
  padding-right: 1ch;
  content: "<-";
}

a.dply::after {
  display: inline-block;
  font-feature-settings: "ss05";
  padding-left: 1ch;
  content: "|>";
}

a.rsch::after {
  display: inline-block;
  font-feature-settings: "ss05";
  padding-left: 1ch;
  content: "|]"
}

a.lnch::after {
  display: inline-block;
  font-feature-settings: "ss05";
  padding-left: 1ch;
  content: "/\\";
}

a.pkup::after {
  display: inline-block;
  font-feature-settings: "ss05";
  padding-left: 1ch;
  content: "\\/";
}

a.rtrn::after {
  display: inline-block;
  font-feature-settings: "ss05";
  padding-left: 1ch;
  content: "<|";
}

a.lght::after {
  display: inline-block;
  font-feature-settings: "ss04";
  padding-left: 1ch;
  content: "<>";
}

a.clct::after {
  display: inline-block;
  font-feature-settings: "ss04";
  padding-left: 1ch;
  content: "</";
}

a.bild::after {
  display: inline-block;
  font-feature-settings: "ss04";
  padding-left: 1ch;
  content: "||";
}


nav a {
  /*padding: 2.25vw 0;*/
}