@import url("https://fonts.googleapis.com/css?family=Bitcount|Inter");
@font-face {
  font-family: Rodin;
  src: url("https://static.wikia.nocookie.net/rhythmheaven/images/4/4c/FOT-RodinNTLGPro-DB.otf");
/*   descent-override: 20%; */
}

@counter-style arabic-filled-ol {
     system: fixed;
     symbols: '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾' '❿' '⓫' '⓬' '⓭' '⓮' '⓯' '⓰' '⓱' '⓲' '⓳' '⓴';
     suffix: " ";
}

@counter-style arabic-empty-ol {
     system: fixed;
     symbols: '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳';
     suffix: " ";
}


:root {
  --color-bg: #0a0a0a;
  --color-fg: #fefefe;
  --color-bright-blue: #0d8bff;
  --color-bright-pink: #ef69d0;
  --color-bright-yellow: #e7cd00;
  --color-orange: #feb70d;
  --color-pink: #e29dff;
  --color-ruby: #d81159;
  --color-blue: #6699ff;
  --color-purple: #926bda;
  --color-aquamarine: #a7f4ca;
  --color-cream: #f9e9ec;
  --color-sunset: #fbd1d1;

  
  --ideal-font-size: clamp(16px, 13.692px + .615vi, 18px);
  font-size: max(1em, var(--ideal-font-size));
  
  --clamp-main-width-min-px: 375px;
  --clamp-main-width-max-px: 640px;
  --main-width: clamp(
    var(--clamp-main-width-min-px),
    100vi,  /* this doesn't do what i want */
    var(--clamp-main-width-max-px)
    );
  
  --left-width-pc: 30;
  --right-rel-width-pc: 30;

  --left-width: calc(var(--left-width-pc) / 100 * var(--main-width));

  --small-space: 0.5rem;
  --medium-space: 0.7rem;
  --large-space: 0.9rem;
  --huge-space: 1.3rem;

  --side-space: var(--huge-space);

  --heading-block-line-space: 0.2ex;
  
  --logo-font: "Bitcount", "sans-serif";
  --main-font: "Rodin", "Inter", "sans-serif";
  --text-font: "Inter", "sans-serif";
  
  --header-size: 2.3rem;
  --h1-size: 2rem;
  --h2-size: 1.4rem;
  --mid-size: 1.2rem;
  --text-size: 1rem;
  --info-size: 0.8rem;

  --body-line-height: 1.2;
  --toc-line-height: 1.2;

  --dot-underline-size: calc(0.1 * var(--mid-size));

  counter-reset: heading-count;

}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--body-line-height);
}

.width-wrapper {
  background: var(--color-bg);
  width: var(--main-width);
  /*   min-height: 100vh; */
  
  /* width: fit-content; */
  margin: auto;

  display: flex;
  flex-direction: column;
  /* gap: var(--small-space); */
  /* grid-template-columns: var(--main-width); */
  /* row-gap: var(--small-space); */
}

.width-wrapper > * {
  /* border: 2px solid white; */
}

.topbar {
  height: var(--small-space);
  background: linear-gradient(to right, #8e9ef6, #e84eb9);
}

header {
  padding-top: var(--large-space);
  padding-bottom: var(--large-space);
  padding-left: 0.13ch;  /* sigh */

  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-content: stretch;
  gap: var(--large-space);
}


.sitelogo {
  display: inline-block;
  font-family: var(--logo-font);
  font-size: var(--header-size);
  color: var(--color-fg);
  text-decoration: none;
}
.sitelogo:visited {
  color: inherit;
}
@media (hover: hover) {
  .sitelogo:hover {
    text-decoration: none;
    color: darkgray;
    filter: none;
  }
  .sitelogo {
    > span:nth-child(1):hover { --c: var(--color-ruby); }
    > span:nth-child(2):hover { --c: var(--color-bright-pink); }
    > span:nth-child(3):hover { --c: var(--color-bright-yellow); }
    > span:nth-child(4):hover { --c: var(--color-orange); }
    > span:nth-child(5):hover { --c: var(--color-pink); }
    > span:nth-child(6):hover { --c: var(--color-bright-blue); }
    > span:nth-child(7):hover { --c: var(--color-sunset); }
    > span:nth-child(8):hover { --c: var(--color-purple); }
    > span:nth-child(9):hover { --c: var(--color-aquamarine); }
    > span:hover {
      color: var(--c);
    }
  }
}

.sitenav {
  align-content: center;

  ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;

    font-size: var(--mid-size);

    height: fit-content;
    gap: var(--large-space);

    li {
      background-color: var(--color-bg);
    }
    a {
      color: var(--color-fg);
      background-color: inherit;
    }
    a:hover {
      /* color: var(--color-fg); */
      text-decoration-color: var(--color-fg);
      text-decoration-style: dotted;
      filter: invert(100%);
      /* background-color: var(--color-bright-yellow); */
    }
  }

  .li-sunset:hover {
    filter: none;
    background: linear-gradient(var(--color-bg), #d37b2e);
  }
}

.sitelogo + .sitenav {
    transform: translateY(-0.1ex);  /* for looks */
}


hr {
  border-style: dotted;
  border-width: var(--dot-underline-size);
  border-left: none;
  border-right: none;
  border-bottom: none;
}



main {
  width: var(--main-width);
  font-family: var(--text-font);
}

a, a:visited {
  text-decoration: underline dotted var(--color-fg) var(--dot-underline-size);
  color: var(--color-fg);
}
a:hover {
  color: var(--color-bright-blue);
  text-decoration-color: var(--color-bright-blue);
  text-decoration-style: solid;
}

h1, h2, h3 {
  font-family: var(--main-font);
}
h2, h3 {
  margin-block-start: var(--medium-space);
  margin-block-end: var(--medium-space);
}
h1, .subtitle {
  margin-block-end: var(--heading-block-line-space);
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: var(--h2-size);
}
.subtitle {
  font-size: var(--mid-size);
}

h2:not(.no-increment) {
  counter-increment: heading-count;
}
h2:not(.no-increment)::before {
  content: counter(heading-count, arabic-empty-ol) " ";
}


.pageinfo {
  font-size: var(--info-size);
  font-family: var(--main-font);
  display: flex;
}
.pageinfo li {
  list-style-type: " • ";
  list-style-position: inside;
}
.pageinfo :first-child {
  list-style-type: none;
}

h1 {
  anchor-name: --anchor-h1;
}

.main-categories {
  max-width: var(--left-width);
  position: absolute;
  position-anchor: --anchor-h1;
  position-visibility: always;
  position-area: center left;
  margin-right: var(--side-space);
  
  justify-self: end;
  align-self: end;
  text-align: right;
  /* height: var(--h1-size); */
  font-size: var(--h1-size);
  font-family: var(--main-font);

  .icon-category {
    width: calc(var(--h1-size) * 0.9);
    aspect-ratio: 1;
    transform: translateY(0.1ex);
  }
}

.toc {
  /* this is brittle so im not going to use it */
  /* position: absolute;
  position-anchor: --anchor-brittle-contents;
  position-visibility: always;
  position-area: left;
  margin-right: var(--small-space);
  top: anchor(top); */

  display: block;
  max-width: var(--left-width);
  position: sticky;
  float: left;
  clear: left;
  margin-left: calc(0px - var(--left-width) - var(--side-space));
  top: var(--side-space);

  /* top: calc(min(10px, anchor-size(bottom))); */
  /* left: anchor(left); */
  /* transform: translateX(-50%); */

  font-size: var(--info-size);
  font-family: var(--main-font);

}

.toc ol {
  /* position: sticky; */
  list-style-type: arabic-filled-ol;
  line-height: var(--toc-line-height);
  text-align: right;
  /* font-family: var(--text-font); */
  list-style-position: inside;
  > li:first-child {
    list-style-type: none;
    counter-reset: list-item;
  }
  > li:not(:first-child) {
    margin-block-start: var(--small-space);
  }
  a:not(:hover) {
    text-decoration: none;
  }
}


/* .sidenote {
  display: block;
  position: relative;
  float: right;
  max-width: var(--right-rel-width);
  margin-right: calc(0px - var(--right-rel-width) - var(--small-space));
  clear: right;
  text-align: left;
  font-size: var(--info-size);
}

.sidenote::before {
  content: "123";
  vertical-align: super;
  font-size: 0.7em;
}

.sidenote-ref::before {
  content: counter(sidenote-count);
  vertical-align: super;
  font-size: 0.7em;
} */

sup {
  vertical-align: text-top;
  font-size: 0.7em;
}

.sidenote-ref {
  color: inherit;
}

.anchor-overflown {
  anchor-name: --anchor-overflown;
}

.sidenotes {
  /* position: fixed; */
  /* max-width: var(--right-rel-width); */
  /* font-size: var(--info-size); */
  /* margin: 0; */
  /* padding-left: var(--medium-space); */

  display: block;
  /* position: relative; */
  /* float: left; */
  /* margin-right: calc(0px - var(--right-rel-width) - var(--small-space)); */
  /* clear: right; */
  text-align: left;
  font-size: var(--info-size);
}

.sidenotes-list {
  margin: 0;
  list-style: none;
}

.sidenotes-list > li {
  max-width: calc(var(--right-rel-width-pc) / 100 * var(--main-width));
  text-align: left;
  position: absolute;
  position-anchor: var(--anchored-to);
  /* position-area: center right; */
  top: min(
    anchor(--anchor-overflown top),
    anchor(top)
  );
  transform: translateX(calc(var(--main-width) + var(--huge-space)));
  position-visibility: always;

  font-family: var(--text-font);
  /* left: calc(
    anchor-size(var(--anchored-to), width)
  ); */
  /* left: var(--main-width); */
}

.page-footer {
  margin-top: calc(20 * var(--huge-space));
  margin-bottom: var(--small-space);
}

.icon-category {
  width: var(--h2-size);
  aspect-ratio: 1;
}

.post-list-wrapper {
  width: 100%;
  margin-top: var(--small-space);
}
.post-list-filter {
  display: flex;
  flex-direction: column;
  gap: var(--small-space);
  align-items: end;
  width: var(--left-width);
  position: sticky;
  float: left;
  clear: left;
  margin-left: calc(0px - var(--left-width) - var(--side-space));
  margin-top: 0.5ex;
  font-family: var(--main-font);
  font-size: var(--info-size);
  border: none;

  label:hover {
    color: var(--color-bright-blue);
    text-decoration-color: var(--color-bright-blue);
    text-decoration-style: solid;
    text-decoration: underline var(--dot-underline-size);
  }

  input[type="radio"] {
    appearance: none;
    margin: 0;
    width: var(--info-size);
    height: var(--info-size);
    background-color: none;
    margin-right: calc(var(--small-space) * 0.5);
    /* transform: translateY(-0.075em); */
  }
  input[type="radio"]:checked {
    /* background-color: red; */
    background-image: url("../images/radio-arrow.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* input[type="radio"]:focus {
    --outline-width: max(2px, 0.1em);
    outline: var(--outline-width) solid currentColor;
    outline-offset: var(--outline-width);
  } */
}
.post-list {
  > li {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content 1fr;
    column-gap: var(--small-space);
    row-gap: calc(0.4 * var(--small-space));

    font-family: var(--main-font);

    .post-list-symbols {
      justify-self: end;
      align-self: end;
      .icon-category {
        width: calc(0.85 * var(--h2-size));
      }
    }
    .post-list-details {
      font-size: var(--info-size);
      justify-self: end;
      align-self: start;
      margin-top: calc(var(--text-size) - var(--info-size));
    }
    /* > a:not(:hover) {
      text-decoration: dotted;
    } */
    h2 {
      margin-block: 0%;
    }
    p {
      font-family: var(--text-font);
      font-size: var(--text-size);
    }
  }
}


.pretty-title {
  --sunset-height: 20rem;
  --theme-info-size: calc(var(--info-size));
  --line-height: 1.5;
  --color-title-link: #6ab7ff;
  
  height: var(--sunset-height);

  background: linear-gradient(
    to bottom,
    #0c0c0c 0%,
    #121212 23%,
    #191a1c 42%,
    #333439 62%,
    #655c53 85%,
    #996f57 93%,
    #b97c50 96%,
    #d37b2e 98%,
    #000000 100%
  );

  .width-wrapper {
    /* position: absolute; */
    background: none;
    align-items: flex-start;
    height: 100%;
    row-gap: var(--large-space);
    z-index: 2;
  }

  .stars {
    position: absolute;
    top: var(--small-space);
    width: 100%;
    height: calc(var(--header-size) + 2 * var(--large-space) + var(--small-space));
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background-image: url(../images/starplot.svg);
    background-position-x: calc((100vw - var(--main-width)) / 2);
    mask-image: linear-gradient(to bottom, #ffffff 36%, #8f8f8f29 100%);
  }

  .circle {
    position: absolute;
    background-color: var(--color-fg);
    border-radius: 50%;
  }

  header {
    margin-top: var(--small-space);  /* same height as articles */
    /* margin-bottom: var(--large-space); */
  }

  .theme-info {
    color: #ffffff4b;
    font-size: var(--theme-info-size);
    position: absolute;
    align-self: flex-end;
  }

  p {
    font-size: var(--text-size);
    color: #fbd1d1ca;
    line-height: var(--line-height);
    /* margin-bottom: 1ex; */
  }
  
  /* this is when there's enough space */
  .refresh-bio {
    display: block;
    position: relative;
    float: left;
    clear: left;
    text-align: right;
    font-size: var(--text-size);
    --w: 2ex;
    width: var(--w);
    height: var(--w);
    padding: 0%;
    top: 0.45ex;
    margin-left: calc(0px - var(--w) - var(--small-space));
    border: none;
    background-color: #b2b2b2;
    mask-image: url("../images/reload.svg");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    &:hover {
      background-color: var(--color-title-link);
    }
  }

  .sitenav {
    --link-color: var(--color-title-link);
    li, a {
      font-size: var(--text-size);
      background-color: transparent;
      color: var(--link-color);
      text-decoration-color: var(--link-color);
    }
    a:hover {
      /* background-color: #000000bb; */
      /* filter: invert(100%); */
      filter: none;
      text-decoration-style: solid;
      text-decoration-color: var(--link-color);
    }
  }

  .tree {
    --tree-scale: 0.13;
    --tree-left: 0.7;
    width: calc(var(--tree-scale) * var(--sunset-height));
    height: calc(var(--tree-scale) * var(--sunset-height));
    /* justify-self: flex-end; */
    /* align-self: flex-end; */
    position: relative;
    left: calc(var(--tree-left) * var(--main-width));
    margin-top: auto;
    user-select: none;
    pointer-events: none;
  }

}