/* -- ||| CSS imports -- */
@import url("https://fonts.googleapis.com/css2?family=Gluten:slnt,wght@-10..10,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gluten:slnt,wght@-10,100..900&family=Inconsolata&display=swap");

/* -- ||| GLOBALS -- */
html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --bgcolor: #211818;
  --bgcolor-secondary: #3b2e2b;
  --fgcolor: #eeeedd;
  --fgcolor-secondary: #d4c3aa;
  --pink: #e0aaeb;
  --dpink: #c426a4;
  --green: #7a9145;
  --dgreen: #384f1b;
  --blue: #55a2f1;
  --dblue: #234a7d;
  --red: #e27c58;
  --dred: #b05154;
  --yellow: #eecf40;
}

html {
  color: var(--fgcolor);
  background-color: var(--bgcolor);
}

a {
  text-decoration-line: none;
  color: var(--fgcolor-secondary);
}

a:hover {
  text-decoration-line: underline;
  color: var(--red);
}

code {
  font-family: "Inconsolata", "Courier New", "Courier", "monospace";
  background-color: var(--bgcolor-secondary);
}

.codeblock {
  display: block;
  width: 40em;
}

/* -- ||| UTILITIES -- */

/* widths */
.w-xs {
  width: 12em;
}

.w-sm {
  width: 20em;
}

.w-med {
  width: 40em;
}

.w-lg {
  width: 60em;
}

.w-xl {
  width: 80em;
}

/* heights */
.h-sm {
  height: 20em;
}

.h-med {
  height: 40em;
}

.h-lg {
  height: 60em;
}

.h-xl {
  height: 80em;
}

/* margins */
.marg-auto {
  margin: auto;
}

.marg-left-sm {
  margin-left: 1em;
}

.marg-left-md {
  margin-left: 2em;
}

.marg-top-sm {
  margin-top: 1em;
}

.marg-top-md {
  margin-top: 2em;
}

/* padding */
.pad-left-sm {
  padding-left: 1em;
}

.pad-left-md {
  padding-left: 2em;
}

.pad-top-sm {
  padding-top: 1em;
}

.pad-top-md {
  padding-top: 2em;
}

/* hide list marker */
.li-style-none {
  list-style: none;
}

.flex {
  display: flex;
}

.flex--col {
  flex-direction: column;
}

.flex__left {
  justify-content: start;
}

.flex__vert {
  justify-content: start;
}

/* -- ||| SITEWIDE -- */

/* || layout */

/* || navbar */
/* -- site tree -- */
.navbar {
  --tree-spacing: -1.2em;
  --tree-line-vert: 1px solid var(--fgcolor-secondary);
  --tree-line-horiz: 1px dotted var(--fgcolor-secondary);
  --tree-list-inset: 1.75em;
  --tree-line-height: 1.2em;
}

/* header */
.navbar__title {
  color: var(--dred);
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "slnt" -10;
}

.navbar__link--title {
  color: inherit;
}

.navbar__link--title:hover {
  color: inherit;
  text-decoration-line: underline;
}

.navbar__list {
  padding-left: 0em;
  list-style: none;
}

.navbar__parent {
  /* effectively empty */
  list-style: none;
}

.navbar__item {
  position: relative;
  line-height: var(--tree-line-height);
  margin-left: var(--tree-list-inset);
}

/* add |_ tree in a box before each element */
.navbar__item::before {
  position: absolute;
  left: var(--tree-spacing);
  top: 0px;
  border-left: var(--tree-line-vert);
  border-bottom: var(--tree-line-horiz);
  content: "";
  width: 1em;
  height: 0.5em;
}

/* add connecting | under element */
.navbar__item::after {
  position: absolute;
  left: var(--tree-spacing);
  bottom: 0px;
  border-left: var(--tree-line-vert);
  content: "";
  width: var(--tree-spacing);
  height: 100%;
}

/* don't put connecting | under last element */
.navbar__item:last-child::after {
  display: none;
}

/* -- ||| SPECIFICS -- */