html {
  --color-accent: oklch(65% 50% 0);
  accent-color: var(--color-accent);
  color-scheme: dark;
}

body {
    font: 100%/1.5 system-ui;
    max-width: 100ch;
    margin-inline: max(1em, (100% - 100ch) / 2);
}

img {
  max-width: 100%;
  height: auto;
}

nav {
  --border-color: oklch(50% 10% 200 / 40%);
  display: flex;
  flex-direction: row;
  margin-bottom: 1em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--border-color); 

  a{
    flex: 1;
    text-decoration: none;
    color: inherit;
    text-align: center;
    padding: 0.5em;

    &.current {
      font-weight: bold;
      border-bottom-width: 0.4em;
      border-bottom-style: solid;
      border-bottom-color: var(--border-color); 
      padding-bottom: 0.25em;
    }

    &:hover {
      font-weight: bold;
      border-bottom-width: 0.4em;
      border-bottom-style: solid;
      border-bottom-color: oklch(0.5912 0.1283 275.29);
      padding-bottom: 0.25em;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  text-wrap: balance;
}

.color-scheme {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 80%;
}