/*  ========== Color Schemes ========== */

:root {
  -webkit-font-smoothing: antialiased;
  --fg: #eee;
  --bg-faint: #2c2c2c;
  --bg: #222;
  --link-local: rgb(190, 118, 241);
  --link-external: rgb(45, 204, 204);
  --progress-none: hsl(189, 0%, 90%);
  --progress-low: hsl(189, 30%, 79%);
  --progress-med: hsl(189, 60%, 68%);
  --progress-high: hsl(189, 91%, 56%);
  --progress-complete: rgb(39, 245, 135);
}

@media (prefers-color-scheme: light) {
  :root {
    -webkit-font-smoothing: subpixel-antialiased;
    --fg: #222;
    --bg-faint: #eee;
    --bg: #fff;
    --link-local: rgb(98, 14, 159);
    --link-external: rgb(17, 194, 194);
    --progress-none: hsl(189, 0%, 80%);
    --progress-low: hsl(189, 30%, 70%);
    --progress-med: hsl(189, 60%, 60%);
    --progress-high: hsl(189, 91%, 50%);
    --progress-complete: rgb(39, 245, 135);
  }
}

/* ========== Gutter Sizing ========== */

:root {
  --min-gutter-width: 1rem;
  --root-content-width: 100vw;
  --v-block-spacing: 2rem;
  --content-width: calc(var(--root-content-width) - (var(--min-gutter-width) * 2));
  --gutter-width: calc((100vw - var(--content-width)) / 2);
}

body {
  width: var(--content-width);
  margin: 1rem auto;
}

@media screen and (min-width: 768px) {

  :root {
    --root-content-width: 768px;
  }

  body {
    margin-block: 4rem;
  }
}

/* ========== Element Styles ========== */

:root {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;

  font-size: 12pt;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  color: var(--fg);
  background-color: var(--bg);
}

body>*[position="relative"]:first-child {
  margin-top: 2rem;
}

header {
  margin-block-end: var(--v-block-spacing);
}

header>h1 {
  margin: 0;
}

footer {
  text-align: center;
}

main {
  clear: both;
  margin-block: 2em;
  padding-block: 2em;
  border-block: var(--bg-faint) solid 2pt;
}

main>section {
  border-top: solid 2pt var(--bg-faint);
  padding-block-start: 2rem;
}

main>section:first-child {
  border-top: none;
  margin-block-start: 0;
  padding-block-start: 0;
}

section:last-child {
  margin-block-end: 0;
}

/*
:is(main, header, footer, section, article, pre) {
  background-color: #FF000033;
}

:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre) {
  background-color: #00FF0033;
}

:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre) {
  background-color: #0000FF33;
}

:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre) {
  background-color: #FF00FF33;
}

:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre)>:is(main, header, footer, section, article, pre) {
  background-color: #00FFFF33;
}
*/

main> :is(section, article),
main> :is(section, article)> :is(section, article) {
  margin-block: var(--v-block-spacing);
}

main> :is(section, article)> :is(section, article) :is(section, article) {
  margin-block-end: calc(var(--v-block-spacing) * (2/3));
}

main> :is(section, article)> :is(section, article) h1 {
  margin-block-end: 1rem;
}

:is(main, section)>*:first-child {
  margin-block-start: 0;
}

:is(main, header, footer, section, article)>*:last-child {
  margin-block-end: 0;
}

article.blog {
  margin-block-start: 0;
}

article.log:not(:first-of-type)::before {
  content: "~~~";
  display: block;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

pre {
  display: block;
  tab-size: 4;
  padding: 0;
  margin: 0;
}

code {
  display: inline;
  background-color: var(--bg-faint);
  font-weight: bold;
}

pre>code {
  display: block;
  overflow: scroll;
  font-weight: inherit;
  margin-block: 0;
  padding: 1.5em;
  border: 1px solid var(--fg);
  border-radius: 0.25em;
}

@media screen and (max-width: 768px) {

  pre {
    tab-size: 2;
  }

  pre>code {
    padding: 1em;
  }
}


hr {
  margin-block: var(--v-block-spacing);
  border: none;
  border-top: solid 2pt var(--bg-faint);
}

ul {
  padding-inline-start: 30px;
}

li {
  margin-block-start: 0.75em;
  line-height: 1.33em;
}

p {
  line-height: 1.33em;
}

blockquote {
  quotes: none;
  display: block;
  margin: 1em 0.5em;
  padding-left: 1em;
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1.15em;
  border-left: var(--fg) solid 3pt;
}

sup {
  line-height: 0;
}

a {
  text-decoration-line: underline;
}

a[href^=http] {
  color: var(--link-external);
}

a[href^=http]::after {
  content: "↗︎";
}

a:not([href^=http]) {
  color: var(--link-local);
}

a:not([href]) {
  color: var(--fg);
  text-decoration: none;
}

a:hover {
  color: var(--fg);
}


/* nav */
nav {
  margin-block-end: var(--v-block-spacing);
}

nav h1 {
  display: none;
}

@media screen and (min-width: 768px) {

  header {
    float: right;
    vertical-align: top;
    width: calc(var(--content-width) - 7rem);
  }

  nav {
    float: left;
    width: 6rem;
    margin-right: auto;
    line-height: initial;
  }

  nav h1 {
    display: block;
    margin-block: 0 0.5rem;
    font-size: 0.8em;
    text-transform: uppercase;
  }

  nav section {
    border: none;
    padding-block: 0;
    margin-block: 1rem;
  }

  nav a {
    display: block;
    border: none;
    padding-block: 0;
    padding-inline: 6pt 0;
    margin-inline: -6pt 0;
    margin-block: 0.33rem 0;
  }

  nav a:hover {
    border-left: var(--fg) solid 2pt;
    padding-inline-start: 4pt;
  }
}

@media screen and (min-width: 1024px) {

  nav {
    width: 6rem;
    position: fixed;
    left: calc(var(--gutter-width) - 8rem);
    top: 5rem;
  }

  header {
    display: block;
    width: 100%;
  }
}


/* blog */

.blog>h1 {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin-block-start: 0;
  margin-block-end: 4pt;
}

.stub {
  margin-block-end: 1rem;
  padding-block-start: 1rem;
  margin-block-start: 1rem;
  border: none;
}

x-byline {
  display: block;
  margin-block-end: 2.5rem;
}

/* tags */

x-tags {
  display: block;
  margin-block: 0 1.5em;
}

x-tags::before {
  content: "tags:";
}

x-tags>x-tag {
  background-color: var(--bg-faint);
  font-size: 0.8em;
  border-radius: 1em;
  padding: 0.5em 1.5em;
  font-weight: bold;
}

x-logs {
  display: block;
  margin-block: 1rem;
}

.recent x-logs {
  display: flex;
  flex-direction: column-reverse;
}

x-log {
  display: block;
  padding: 0.25em 1em;
}

x-log:nth-child(2n - 1) {
  background-color: var(--bg-faint);
}

x-rel-nav {
  display: flex;
  --page-padding: 1em;
  padding: 0.33em;
}

x-rel-nav:nth-child(2n - 1) {
  background-color: var(--bg-faint);
}

@media screen and (min-width: 768px) {
  x-rel-nav {
    --page-padding: 2em;
  }
}

x-rel-nav>.prev {
  margin-inline-end: var(--page-padding);
  width: 4em;
}

x-rel-nav>.title {
  flex: 1;
  text-align: center;
}

x-rel-nav>.next {
  margin-inline-start: var(--page-padding);
  width: 4em;
}

/* Misc styles */

.copyleft {
  display: inline-block;
  transform: scale(-1, 1);
}

.active-dev {
  --link-local: rgb(98, 14, 159);
  display: block;
  position: sticky;
  top: 0.5rem;
  max-width: calc(var(--content-width) - 1rem);

  padding-block: 4pt;
  margin-block: -4rem 2.5rem;
  margin-inline: auto;

  font-weight: bold;
  text-align: center;

  border-radius: 8pt;
  background-color: var(--link-external);
  color: var(--bg);
}

project-overview {
  display: flex;
}

project-name {
  font-weight: bold;
}

project-stage {
  flex: 1;
  text-align: right;
  font-weight: bold;

}

project-stage.research {
  color: var(--progress-none);
}

project-stage.development {
  color: var(--progress-low);
}

project-stage.draft {
  color: var(--progress-med);
}

project-stage.functional {
  color: var(--progress-high);
}

project-stage.complete {
  color: var(--progress-complete);
}