:root {
  --sans-serif-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --serif-font-family: fira-sans, Georgia, "Times New Roman", Times, serif;
  --text-color: hsl(0, 1%, 20%);

  --link-neutral: hsl(0, 1%, 65%);
  --link-hover: hsl(0, 1%, 50%);
  --link-active: hsl(0, 1%, 35%);
  --blue-selection: rgba(0, 166, 231, 0.2);
  --blue-light: rgb(0, 166, 231);
  --blue-mid: rgb(0, 113, 158);
  --blue-dark: rgb(0, 59, 223);

  --divider-color: rgb(211, 211, 211);
}

html,
body {
  font-family: var(--sans-serif-font-family);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
  color: var(--text-color);
}

::selection {
  background: var(--blue-selection);
}

h1,
h2 {
  font-weight: 400;
}

pre {
  font-size: 0.825rem;
}

a {
  text-decoration: underline;
  text-decoration-color: var(--link-neutral);
  color: black;
  transition: color 0.15s ease-in-out;
}

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

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

  &:hover {
    color: var(--text-color);
  }
}

ul, ol {
  &>li:not(:last-child) {
    margin-bottom: 0.3rem;
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

img.a-little-smaller {
  height: 80%;
}

img.the-big-one, img.a-little-smaller {
  align-self: center;
  max-height: calc(100svh * (15 / 16) - 2rem);
}

.big-image {
  width: 100%;
}

div.rule {
  width: 90%;
  height: 1px;
  background-color: var(--divider-color);
  margin-left: 5%;
}

.spacer {
  padding: 10px;
}

.container {
  height: 96svh;
  width: 96svw;
  margin: 2svh 2svw;
}

nav.navbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

nav.navbar > a {
  padding: 0.5rem 0;
  display: block;
  color: var(--link-neutral);
  text-decoration: none;
}

nav.navbar > a:hover {
  color: var(--link-hover);
}

nav.navbar > a.home {
  margin-right: auto;
}

nav.navbar > a.current {
  color: var(--link-active);
}

nav.navbar > a.current:hover {
  color: var(--link-active);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.grid-3 > span.spacer {
  display: none;
}

textarea.full {
  height: 100%;
  width: 100%;
}

.large-text {
  font-size: 1.5rem;
}

nb {
  font-style: italic;
  font-size: 0.9em;
}

.main--posts-container {
  border-top: 1px solid var(--divider-color);
}

.section:not(:last-child) {
  border-bottom: 1px solid var(--divider-color);
}

.main--posts-container a {
  color: black;
}

.main--posts-container a:hover {
  color: var(--blue-light);
}

ul.posts {
  list-style-type: none;
  padding: 0;
  /*font-family: var(--serif-font-family);*/
}

ul.posts a {
  text-decoration: none;
}

ul.posts > li {
  margin: 10px 0;
}

ul.posts h3,
ul.posts h4 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.post-container {
  /*font-family: var(--serif-font-family);*/
}

.heading {
  position: relative;
}

.heading:hover .heading-link {
  opacity: 1;
}

.heading-link {
  text-decoration: none;
  opacity: 0;
  bottom: 1px;
  width: 25px;
  left: -25px;
  position: absolute;
  transition: opacity 0.1s ease-in-out;
}

.img-with-description {
  display: flex;
  flex-direction: column;
}

.img-with-description > .desc {
  font-size: 0.8rem;
  color: var(--link-hover);
  text-align: center;
  text-decoration: none;
}

.img-with-description > .desc:hover {
  color: var(--link-active);
}

collab-text {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;

  height: 15rem;
  overflow: hidden;

  > textarea {
    height: 100%;
  }

  > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > pre {
      height: 80%;
      overflow: auto;
    }

    > div {
      display: flex;
      gap: 0.5rem;

      button {
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        background-color: var(--blue-light);
        border: 0;
        color: white;
        transition: background-color 0.1s ease-in-out;

        &.forward {
          margin-left: auto;
        }

        &:disabled {
          background-color: oklch(from var(--blue-light) calc(l + 0.12) c h);
        }

        &:hover:not(:disabled) {
          cursor: pointer;
          background-color: oklch(from var(--blue-light) calc(l - 0.15) c h);
        }
      }
    }
  }
}

@media (min-width: 992px) {
  html, body {
    font-size: 18px;
  }

  nav.navbar > a {
    display: inline;
  }

  nav.navbar {
    height: calc(100svh / 16);
    width: 100%;
    margin: 0.5rem;
    align-self: center;
  }

  /* TODO: this should be inline above */
  collab-text {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-3 > span.spacer {
    display: inline;
  }

  .container {
    height: 100vh;
    width: 60svw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .inner {
    height: auto;
  }
}