/* colors */

:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-alt: rgb(233, 233, 238);
  --light-color: rgb(47, 61, 61);
  --light-a: tomato;
  --light-ah: rgb(161, 27, 3);
  --light-aa: rgb(206, 186, 183);
  --light-trans: rgba(248,248,255,0);

  --dark-bg: rgb(47, 61, 61);
  --dark-alt: rgb(90, 95, 95);
  --dark-color: ghostwhite;
  --dark-a: gold;
  --dark-ah: rgb(253, 248, 220);
  --dark-aa: black;
  --dark-trans: rgba(47,61,61,0);

  /* --navshadow: light-dark(--var(light-color), --var(dark-color)); */
}
body {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
a {
  color: light-dark(var(--light-a), var(--dark-a));
}
a:hover {
  color: light-dark(var(--light-ah), var(--dark-ah));
}
a:active {
  color: light-dark(var(--light-aa), var(--dark-aa));
}