@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

@font-face {
  font-family: "Nice font huh? Trying to find the name? Well I tricked your browser so now you need to use one of those terrible font detection websites. Or use it as a reason to contact me :)";
  src: url("/assets/fonts/monospace-1d18dd4d.ttf") format("truetype");
  font-weight: normal;
}

:root {
  /* --global-bg-color: rgb(12, 12, 11); */
  /* --global-bg-color: #080a0b; */
  --global-bg-color: hsl(22, 2%, 7%);
  /* --global-bg-color: #010101; */
  /* --global-accent-color: rgb(255, 229, 197); */
  /* --global-accent-color: rgb(222, 197, 166); */
  /* --global-accent-color: #f8bc8c; */
  --global-accent-color: hsl(22, 93%, 73%);
  /* --global-accent-color: #ffc34a; */
  --global-accent-color-alt: rgb(42, 41, 40);
  /* --global-blue-color: #abc4c0; */
  --global-blue-color: #8fa4c7;
  /* --global-blue-color: #7ec3e6; */
  /* --global-text-color: hsl(27, 55%, 74%); */
  --global-text-color: hsl(37, 26%, 85%);
  /* --global-text-light-color: hsl(27, 55%, 78%); */
  --global-text-light-color: hsl(37, 26%, 97%);
}

body {
  background-color: var(--global-bg-color);
  color: var(--global-text-color);
  font-family: "Nice font huh? Trying to find the name? Well I tricked your browser so now you need to use one of those terrible font detection websites. Or use it as a reason to contact me :)";
  font-size: 11pt;
  margin: 3rem auto;
  padding: 0 1rem;
  overflow-wrap: break-word;
  max-width: 640px;
  line-height: 1.5;
}

p {
  margin: 0.5rem auto;
}

a {
  color: var(--global-blue-color);
  text-decoration: underline;
  text-decoration-thickness: 2pt;
  text-underline-offset: 2.3pt;
  padding-left: 2.3pt;
  padding-right: 2.3pt;
}

a:hover,
a:active,
a:focus {
  color: var(--global-bg-color);
  background-color: var(--global-blue-color);
  text-decoration-color: var(--global-blue-color);
  border-radius: 2pt;
  text-decoration: none;
  padding-bottom: 0.3pt;
  padding-top: 0.3pt;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--global-text-light-color);
}

h2 {
  text-decoration: underline;
  text-decoration-thickness: 3pt;
  text-underline-offset: 3pt;
}

h3 {
  font-weight: bold;
}

h3::before {
  content: "> ";
}

img {
  border-radius: 0.5rem;
}

/* Don't break navigation bar options */
#top > div > span > a {
  white-space: nowrap;
}

.section {
  margin-top: 3rem;
}

.section > *:nth-child(2) {
  margin-top: 2rem;
}

.section > *:not(:nth-child(1)) {
  margin-left: 0rem;
}

.section > h3:not(:nth-of-type(1)) {
  margin-top: 2rem;
}

#table-of-contents {
  word-wrap: normal;
}

.toc-item {
  /* line-height: 30pt; */
  word-wrap: normal;
}

.toc-item:not(:nth-last-child(1)) {
  margin-right: 1rem;
}

.cmd-prompt {
  color: var(--global-accent-color);
}

#title > a {
  color: var(--global-blue-color);
  text-decoration: underline;
  text-decoration-thickness: 3pt;
  text-underline-offset: 5pt;
  padding-left: 2.3pt;
  padding-right: 2.3pt;
}

#title > a:hover,
#title > a:active,
#title > a:focus {
  color: var(--global-bg-color) !important;
  background-color: var(--global-blue-color);
  text-decoration-color: var(--global-blue-color);
  border-radius: 3pt;
  text-decoration: none;
  padding-bottom: 0.2pt;
  padding-top: 0.3pt;
}

.title-name {
  color: white;
}

.cmd-carret {
  animation: blink 750ms step-start infinite;
  color: var(--global-text-light-color);
}

.accent-text {
  color: var(--global-accent-color);
}

.list-label {
  font-weight: bold;
  color: var(--global-text-light-color);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

ul {
  padding-left: 14.55pt;
}

ul li {
  margin: 0.3rem 0;
}

ul li::marker {
  content: "- ";
  color: var(--global-accent-color);
}

ol li {
  margin: 0.7rem 0;
}

ol li::marker {
  color: var(--global-accent-color);
}

button {
  background-color: var(--global-accent-color);
  border: 0;
  font-size: 12pt;
  padding: 4pt 6pt;
  border-radius: 2pt;
  font-weight: bold;
}

button:hover {
  cursor: pointer;
  background-color: #ffffff;
}

.spacer {
  margin: 3rem 0;
}

pre {
  background-color: var(--global-accent-color-alt) !important;
  padding: 0.75rem;
  overflow-x: auto;
  /* white-space: nowrap; */
  /* break-inside: avoid; */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4pt;
}

code:not(pre > code) {
  font-weight: normal !important;
  color: var(--global-accent-color);
  background-color: var(--global-accent-color-alt) !important;
  border-radius: 2pt;
  padding-left: 4pt;
  padding-right: 4pt;
}

.fade-overflow * {
  position: relative;
  z-index: 80;
}

.fade-overflow {
  background:
      /* Shadow covers */ linear-gradient(
      to right,
      rgb(37, 37, 36) 30%,
      rgba(37, 37, 36, 0)
    ),
    linear-gradient(
        to left,
        var(--global-accent-color-alt) 30%,
        rgba(37, 37, 36, 0)
      )
      100% 0,
    /* Shadows */
      radial-gradient(
        farthest-side at 0% 50%,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0)
      ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0)
      )
      100% 0;

  background-repeat: no-repeat;
  background-color: var(--global-accent-color-alt);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.anchor {
  display: none;
}

blockquote {
  background-color: var(--global-accent-color-alt);
  padding: 0.5rem 1.5rem;
  border-radius: 0 4pt 4pt 0;
  border-left: 2pt solid var(--global-accent-color);
}