/* @import "./fonts.css"; */
:root {
  color-scheme: light dark;
  accent-color: #bdca31;

  --bg: light-dark(#ffffff, #161616);
  --fg: light-dark(#111111, #dddddd);
  --headers: light-dark(#222222, #eeeeee);
  --emphasis: light-dark(#000000, #ffffff);
  --accented: #bdca31;
  --link-unvisited: #268bd2;
  --link-visited: #6c71c4;

  --stretch: stretch;
  @supports not (width: stretch) {
    --stretch: -moz-available;

    @supports not (width: -moz-available) {
      --stretch: -webkit-fill-available
    }
  }
}

html {
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: var(--fg);
  background-color: var(--bg);
  font-size: 1.175em;
  scrollbar-color: light-dark(#7e8c8a, #bdca31) light-dark(#dddddd, #222222);
  /* &::-webkit-scrollbar { */
  /*   scrollbar-gutter: stable; */
  /* } */
}

body {
  display: flex;
  flex-direction: column;
  max-width: 45em;
  width: 100%;
  margin: 0 auto;
  padding: 1em;
  font-family: "Brygada 1918", serif;
}

article {
  h2 {
    padding: 0.2em 0;
    border-bottom: 1px dotted light-dark(#222222, #dddddd);
  }

  h3 {
    max-width: 50%;
    border-bottom: 1px dashed light-dark(#6b7d8f, #475266);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Overpass", sans-serif;
  font-weight: 600;

  & code {
    font-family: "Overpass Mono", monospace;
    font-size: revert;
    font-weight: 700;
    background: none;
  }

  & a { text-decoration: none; }
}

header#site-top {
  border-bottom: 1px solid light-dark(#000000, #ffffff);
}

header nav {
  font-variant-caps: small-caps;
  font-size: 1.05em;
  display: flex;
  justify-content: space-between;

  #site-title a { padding: 0.2em 6px; }

  a, a:visited {
    border: 1px solid light-dark(#667381, #c5c5c8);
    padding: 0.2em 0.3em;
    font-weight: 500;
    text-decoration: none;

    &:hover {
      border-color: var(--accented);
      background-color: light-dark(#f4f6f4, #211f21);
      text-decoration: underline;
    }
  }

  div.menu { display: none; }

  div.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  div.nav-home a {
      border: none;
      background-color: revert;
  }

  div.nav-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
  }

  input#toggle-navmenu { display: none; }
}

hgroup {
  border-bottom: 1px solid light-dark(#000000, #ffffff);

  h1 {
    margin-bottom: 0;
    font-variant-caps: small-caps;
    font-weight: 750;
    text-align: center;
  }

  #post-byline {
    margin-top: 0.2em;
    margin-bottom: 1.5em;
    font-size: 0.8em;
    font-style: italic;
    text-align: revert;

    time { font-size: revert; }
  }
}

p {
  line-height: 1.5;
  text-align: justify;

  &#post-description {
    margin-bottom: 1.5em;
    font-size: 0.9em;
    font-style: italic;
    text-align: right;
  }
}

li {
  line-height: 1.4;
  margin: 5px 0;

  p { margin-bottom: 5px; }
}

ul.post-list {
  list-style: none;
  padding-inline-end: 40px;

  h3, h4 { margin: 0; }

  li {
    border-bottom: 1px dotted light-dark(#667381, #afb7c1);
    margin-bottom: 1em;

    a {
      display: flex;
      justify-content: space-between;
      padding: 0.2em 0.5em;

      &:hover { background-color: light-dark(#6b7d8f1f, #47526633); }
    }
  }

  time {
    color: light-dark(#afb7c1, #667381);
    font-style: italic;
    min-width: fit-content;
  }
}

b, strong {
  color: var(--emphasis);
  font-weight: 700;
}

a {
  color: var(--link-unvisited);

  &:visited { color: var(--link-visited); }

  &[href^="#"] {
    color: var(--headers);

    &:visited { color: var(--fg); }
    &:hover { color: var(--emphasis); }
  }

  &[href="#site-top"] {
    font-variant-caps: small-caps;
    text-decoration: revert;
  }

  &#cc-license {
    display: inherit;

    &:hover { text-decoration: none; }

    img { vertical-align: text-top; }
  }

  &.title {
    color: light-dark(#111111, #eeeeee);
    text-decoration: none;

    &:visited { color: light-dark(#222222, #dddddd); }
    &:hover { color: var(--emphasis); }

    &.devlog {
      color: var(--link-unvisited);
      font-weight: 600;
      text-decoration: underline;

      &:visited { color: var(--link-visited); }
    }
  }
}

blockquote {
  border-left: 3px solid #777777;
  padding-left: 1em;
  font-size: 0.95em;
  font-style: italic;
}

code {
  font-family: "JetBrainsMono", monospace;
  font-size: initial;
  background-color: light-dark(#fcfcfc, #10141c);
}

time, .date { font-size: 0.9em; }

figure {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1em auto;
  align-self: center;
  text-align: center;
  font-style: italic;

  img {
    display: initial;
    max-width: 100%;
  }

  pre {
    font-style: normal;
    text-align: left;
  }

  figcaption { font-size: 0.95em; }
}

pre {
  display: grid;
  overflow: auto !important;
  overflow-wrap: normal;
  border-top: 1px solid light-dark(#000000, #ffffff);
  border-bottom: 1px solid light-dark(#000000, #ffffff);
  padding: 10px 0;

  code {
    display: block;
    padding: 1em;
    width: initial;
    overflow: auto !important;
    font-size: initial;
    line-height: 1.42;
  }

  &.mermaid svg { overflow: auto; }
}

table {
  display: block;
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  overflow-x: auto;

  tr:nth-child(odd) { background-color: light-dark(#6b7d8f12, #222222); }

  th, td {
    padding: 0.6em;
    border: 1px solid light-dark(#828E9F2E, #333333);
  }
}

footer {
  p { text-align: center; }

  a {
    font-weight: 600;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  .footnotes {
    border-top: 1px dotted #777777;
    font-size: 0.7em;

    p {
      display: inline;
      text-align: left;
    }

    a {
      color: var(--link-unvisited);
      font-weight: 900;

      &:visited { color: var(--link-visited); }
      &:hover { color: var(--emphasis); }
    }

    code { font-size: 0.8em; }
  }

  &#prev-next {
    display: flex;
    justify-content: space-between;

    a { text-decoration: revert; }

    p { margin: 0.5em 0; }
    #prev p { text-align: left; }
    #next p { text-align: right; }
  }

  #under-construction {
    display: flex;
    flex-direction: column;
    align-items: center;

    h5 {
      margin: 1em 0;
      align-content: center;
    }
  }
}

/* --- classes ------- */
.block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 10px;
  padding: 5px 15px;
  border: 1px dotted light-dark(#000000, #ffffff);
  font-family: "Overpass", sans-serif;
  font-size: 0.95em;

  >h1, >h2 {
    margin-bottom: 0;
    font-size: 1.5em;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 4px 15px 0 15px;
    border-bottom: 1px dotted light-dark(#000000, #ffffff);
    font-weight: 650;
    font-variant-caps: small-caps;
    text-align: left;
  }

  p {
    margin-bottom: 0.4em;
    padding: 0 15px;
    font-weight: 300;
  }
}

.desc { font-size: 0.9em; }

.feed {
  margin-top: 2em;

  &>div {
    margin: 0 -20px;
    padding: 5px 20px;
    margin-bottom: 1em;

    &>h2 { margin-top: 0.4em; }
  }

  &>div[id]:target { animation: pulse-div 2s ease-in-out 1 forwards; }
}

.footnote-ref {
  font-weight: 900;

  a {
    color: var(--link-unvisited);

    &:visited { color: var(--link-visited); }
    &:hover { color: var(--emphasis); }
  }
}

.icon { width: 18px; }

.post { padding-bottom: 1em; }

.posts {
  h2 { border-bottom: 1px dotted; }
}

.row {
  display: flex;
  flex-direction: row;
  gap: 1em;

  h4 { margin: 0; }
}

.small {
  font-size: 0.8em;

  code { font-size: 0.95em; }
}

.tag {
  border: 1px solid #999999;
  padding: 2px 5px;
  color: #7f7f7f;
  font-family: "Overpass Mono", monospace;
  font-size: 0.7em;
  font-weight: 200;
}

.tiny {
  font-size: 0.7em;

  code { font-size: 0.95em; }
}

.underline { text-decoration: underline; }

.version {
  font: italic 600 0.9em "JetBrainsMono", monospace;
  background: none;
}

.wave {
  color: light-dark(#000000, #ffffff);
  background-color: light-dark(#eeeeee, #111111);
  text-shadow: 1px 1px 10px light-dark(#000000, #ffffff), 1px 1px 10px light-dark(#333333, #cccccc);
}

/* --- id specific --- */
#home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 82.5vh;

  h1 {
    font-size: 3em;
    font-variant-caps: small-caps;
    font-weight: 700;
  }

  hr {
    border: 1px dotted;
    min-width: 75%;
  }

  nav {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 1em 0;
    font-variant-caps: small-caps;

    a {
      border: 1px solid light-dark(#667381, #c5c5c8);
      padding: 0.3em;
      font-weight: 500;

      &:hover {
        border-color: var(--accented);
        background-color: light-dark(#f4f6f4, #211f21);
        text-decoration: underline;
      }
    }
  }
}

#page-title { margin: revert; }

#post-title {
  color: var(--headers);
  text-align: left;
  font-variant-caps: revert;
}

#site-title {
  display: flex;
  margin: 0.2em 0;
  font-size: 1.7em;
  font-weight: 500;
  text-align: left;

  a:hover { background-color: revert; }
}

#software {
  ul ul { list-style-type: none; }
}

#tags {
  border-top: 1px dotted #777777;
  padding-top: 1em;
  text-align: center;
}

/* --- keyframes ----- */
@keyframes pulse-div {
  0%, 100% { background-color: light-dark(#eeeeee, #222222); }
  50% { background-color: light-dark(#dddddd, #111111); }
}

/* --- mobile screens  */
@media screen and (max-width: 685px) {
  body { max-width: 90vw; }

  header nav {
    display: block;

    & div.menu {
      display: flex;
      padding: 0.2em;
      height: 100%;

      & label {
        padding: 0.5em 6px;
        cursor: pointer;

        &:hover { text-decoration: underline; }
      }
    }

    & div.nav-items {
      display: none;
      flex-direction: column;
      margin: 0;
      width: 100%;
    }
  }

  ul.post-list {
    padding-inline-start: 30px;
    padding-inline-end: 30px;

    li a { display: block; }
  }

  #toggle-navmenu:checked ~ .nav-items {
    display: flex;
    align-items: center;
    padding: 0.5em 0;
    border-top: 1px dashed;

    & a {
      margin: 0.2em 0;
      width: 85%;
      text-align: center;
    }
  }

  #home hr { min-width: var(--stretch); }
  #home nav {
    flex-direction: column;
    width: 85%;
  }
}