html {
    --color-accent: oklch(65% 50% 0);
    --color-accent-bg: oklch(65% 50% 0/.3);
    --border-color: oklch(50% 10% 200 / 40%);
    accent-color: var(--color-accent-bg);
    border-bottom-color: var(--border-color);
    color-scheme: light dark;
}

body {
  /* Set line height to 1.5 times the font size
	   and use the OS’s UI font as the website font
	 */
  font: 100%/1.5 system-ui;
  max-width: 100ch;
  margin: 0 auto;
  padding: 1rem;
}
h1 {
    font: 300%/1.2 system-ui;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    text-wrap:balance;
}
  nav a.current {
    font-weight: bold;
    text-decoration: none;
    color: rgb(73, 146, 255);
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: var(--border-color);
  }
  nav a {
    flex: 1;
    color: inherit;
    text-align: center;
    padding: .5em;
  }
  nav a:hover {
    background-color: var(--color-accent-bg);
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-accent);
  }
  nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--border-color);
  }

  form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  label {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
  }
  button {
    grid-column: 1/-1;
  }

  .projects {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    article {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
  }

  .color-scheme {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font: 80%/1.5 system-ui
  }