:root {
  --dem-fonts-tho: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  /*
   * colors from: https://encycolorpedia.com/named
   */

   /* light mode */
  --akebono-iro: #fa7b62;
  --chickadee: #ffc34d;
  --pale-robin-egg-blue: #96ded1;
  --tropical-violet: #cda4de;

  /* dark mode */
  --bangladesh-green: #006a4e;
  --bdazzled-blue: #2e5894;
  --bittersweet-shimmer: #bf4f51;
  --persian-plum: #701c1c;

  --light-bg: white;
  --light-fg: black;

  --dark-bg: black;
  --dark-fg: white;
}

@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: var(--light-bg);
    font-family: var(--dem-fonts-tho);
    padding: 1rem;
  }

  :any-link {
    color: var(--light-fg);
  }

  h1 :any-link,
  :any-link.nav {
    text-decoration: none;
  }

  header {
    text-align: center;
  }

  main > ul {
    border-top: 1px solid;
    margin: auto;
    width: fit-content;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul ul {
    padding-left: 1rem;
  }

  ul > li:has(ul) {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }

  ul > li:has(ul) > b {
    text-decoration: line-through;
  }

  ul > li:has(ul input[name=completed][value=false]) > b {
    text-decoration: none;
  }

  button {
    background: none;
    border: none;
    color: inherit;
    display: inline;
    font-family: var(--dem-fonts-tho);
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    text-align: match-parent;
  }

  input[name=completed][value=true] ~ button {
    text-decoration: line-through;
  }

  .chores {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .assignment {
    background-color: silver;
    border-radius: 1rem;
    padding: 1rem;
    flex-basis: 0;
    flex-grow: 1;
  }

  .assignment h2 {
    text-decoration: line-through;
  }

  .assignment:has(input[name=completed][value=false]) h2 {
    text-decoration: none;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--dark-bg);
      color: var(--dark-fg);
    }

    :any-link {
      color: var(--dark-fg);
    }
  }
}

.dan {
  background-color: var(--akebono-iro);
}

.dan,
.dan :any-link {
  color: var(--light-fg);
}

@media (prefers-color-scheme: dark) {
  .dan {
    background-color: var(--persian-plum);
  }

  .dan,
  .dan :any-link {
    color: var(--dark-fg);
  }
}

.river {
  background-color: var(--pale-robin-egg-blue);
}

.river,
.river :any-link {
  color: var(--light-fg);
}

@media (prefers-color-scheme: dark) {
  .river {
    background-color: var(--bdazzled-blue);
  }

  .river,
  .river :any-link {
    color: var(--dark-fg);
  }
}

.whimsy {
  background-color: var(--tropical-violet);
}

.whimsy,
.whimsy :any-link {
  color: var(--light-fg);
}

@media (prefers-color-scheme: dark) {
  .whimsy {
    background-color: var(--bittersweet-shimmer);
  }

  .whimsy,
  .whimsy :any-link {
    color: var(--dark-fg);
  }
}

.marci {
  background-color: var(--chickadee);
}

.marci,
.marci :any-link {
  color: var(--light-fg);
}

@media (prefers-color-scheme: dark) {
  .marci {
    background-color: var(--bangladesh-green);
  }

  .marci,
  .marci :any-link {
    color: var(--dark-fg);
  }
}