:root {
  color-scheme: light dark;
  font-family: var(--main-font);
  font-size: 18px;

  --main-font:
    Inter,
    Roboto,
    "Helvetica Neue",
    "Arial Nova",
    "Nimbus Sans",
    Arial,
    sans-serif;

  --mono-font:
    ui-monospace,
    "Cascadia Code",
    "Source Code Pro",
    Menlo,
    Consolas,
    "DejaVu Sans Mono",
    monospace;

  --big-text-color: light-dark(#161616, #f0f0f0);
  --text-color: light-dark(#535353, #b9b9b9);
  --secondary-text-color: light-dark(#6c6c6c, #868686);
  --subtle-outline-color: light-dark(#cccccc, #525252);
}

header {
  display: flex;
  padding-top: 3rem;
  padding-bottom: 1rem;

  margin-bottom: 1rem;

  gap: 1rem;

  & a {
    font-size: 32px;
    font-weight: 300;
  }

  & .active-nav {
    font-size: 32px;
    font-weight: 300;
    font-weight: 700;
    color: var(--big-text-color);
    text-decoration: none;
  }
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.65rem;
}

footer {
  display: flex;
  align-items: center;

  color: var(--text-color);

  margin-top: 1.5rem;
  gap: 1rem;
  height: 5.5rem;
}

main {
  display: grid;
  min-height: 100svh;

  grid-template-rows: auto 1fr auto;

  width: 45%;
  max-width: 50rem;
  margin: auto;

  gap: 0.7rem;
}

@media screen and (max-width: 600px) {
  main {
    width: 95%;
  }

  header {
    padding-top: 1.45rem;
  }

  footer {
    font-size: 16px;
  }
}

@media screen and (max-width: 1300px) {
  main {
    width: 93%;
    font-size: 17px;
  }
}

.article-header {
  padding-bottom: 1rem;
  color: var(--big-text-color);

  & time {
    color: var(--secondary-text-color);
    font-size: 24px;
  }

  & h1 {
    line-height: 1.2;
  }
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  list-style-type: none;
  padding-left: 0;

  & li article {
    display: flex;
    flex-direction: column;

    gap: 0.2rem;

    padding-bottom: 0.5rem;
    border-bottom: 2px dashed var(--subtle-outline-color);

    & p {
      font-size: 0.85em;
    }
  }

  & li:last-of-type article {
    border: 0;
  }
}

.article-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;

  margin-bottom: 0.3rem;

  & a {
    font-size: 1.05rem;
  }

  & time {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    text-wrap-mode: nowrap;
    padding-left: 0.35rem;
  }
}

.article-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  line-height: 1.7;

  overflow: hidden;

  color: var(--text-color);

  & pre {
    overflow: auto;
    padding: 0.5rem 0.75rem;

    border: 1px solid light-dark(#00000023, #ffffff18);
  }

  & p:has(img) {
    display: flex;
    justify-content: center;
  }

  & p code {
    background-color: light-dark(#00000017, #ffffff0a);
    padding: 0.25rem 0.4rem;

    font-size: 14px;

    border-radius: 4px;
    margin: 2px;
  }
}

& h1,
h2 {
  color: var(--big-text-color);
}

p {
  color: var(--text-color);
}

code {
  font-family: var(--mono-font);
  font-size: 16px;
}


h1 {
  font-weight: 200;
}

h2 {
  font-weight: 300;
}

figcaption {
  font-size: 14px;
  color: var(--secondary-text-color);
}

details {
  outline: 2px dashed var(--subtle-outline-color);
  padding: 0.5rem;
  font-size: 0.9em;

  &[open] summary {
    margin-bottom: 0.4rem;
  }

  & summary {
    color: var(--big-text-color);
    cursor: pointer;
  }

  & article {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;
  }
}

hr {
  border: 1px solid var(--subtle-outline-color);
}