/* color scheme */

:root {
  color-scheme: light dark;
  --bg-color-white: hsl(197.72726, 48%, 82%);
  --bg-color-dark: hsl(181.57895, 30%, 25%);
  --bg-color: light-dark(var(--bg-color-white), var(--bg-color-dark));

  --link-bg-color-dark: #4ea6aa44;
  --link-bg-color-white: #4ea6aa44;
  --link-bg-color: light-dark(var(--link-bg-color-white), var(--link-bg-color-dark));

  --link-text-color-dark: white;
  --link-text-color-white: black;
  --link-text-color: light-dark(var(--link-text-color-white), var(--link-text-color-dark));

  --button-bg-color-dark: #4ea6aaff;
  --button-bg-color-white: #4ea6aaff;
  --button-bg-color: light-dark(var(--button-bg-color-white), var(--button-bg-color-dark));

  --text-color-white: hsl(212.3077, 8%, 32%);
  --text-color-dark: hsl(193.84615, 12%, 78%);
  --text-color: light-dark(var(--text-color-white), var(--text-color-dark));
}

body {
  background-color: var(--bg-color);

  * {
    color: var(--text-color);
  }
}

/* links */

a {
  padding: 0px 2px;
  border-radius: 4px;
  color: var(--link-text-color);
}

a:hover {
  text-decoration-line: none;
  background-color: var(--link-bg-color);
  background-clip: border-box;
}

/* buttons */

button {
  background-color: var(--button-bg-color);
  border: none;
  padding: 0.2pc;
  color: black;
  font-family: JetBrains-Mono;
  border-radius: 4pt;
  /* background: none; */
}

/* fonts */

@font-face {
  font-family: JetBrains-Mono;
  src: url("/fonts/JetBrains-Mono/JetBrainsMono[wght].ttf"),
    url("/fonts/JetBrains-Mono/JetBrainsMono-Italic[wght].ttf");
}

p, li {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: JetBrains-Mono;
}