html {
  // light mode
  --text-color: rgb(29, 29, 29);
  --background-color: rgb(255, 255, 255);
  --accent-color: rgb(211, 55, 38);
  --logo-color: var(--text-color);
  --menu-color: #e0e0e0;
  --menu-text-color: var(--text-color);

  font-family: Fredoka;
  font-weight: 300;

  color: var(--text-color);
  background-color: var(--background-color);
  transition: background-color 100ms linear;

  .only-on-dark {
    display: none;
  }
}

[data-theme="dark"] {
  // dark mode
  --text-color: rgb(222, 112, 108);
  --background-color: rgb(41, 23, 44);
  --accent-color: #E94541;
  --logo-color: #E94541;
  --menu-color: #A3203D;
  --menu-text-color: #F4A5A7;

  .only-on-dark {
    display: inline-block;
  }

  .only-on-light {
    display: none;
  }
}