:root {
  font-family: sans-serif;

  --BG-CLR: aliceblue;
  --border-rad: 0.5rem;
  --min-card-alert-clr: #9e1200;
  --max-card-alert-clr: rgb(1, 82, 1);
  --nav-bg-clr: #f5f5f5;

  --max-card-alert-bg: palegreen;
  --min-card-alert-bg: rgb(255, 112, 122);

  --reset-base-color: rgb(187, 38, 48);
  --reset-btn-hover: rgb(255, 0, 17);
  --reset-inactive: rgb(226, 177, 180);

  --progress-bar-clr: #01d801;
  --card-question-clr: #fff7bc;

  --border-clr: #333;
  --primary-btn-hover: rgb(14, 14, 14);
  --primary-btn-color: rgb(53, 56, 58);

  --count-color: #bfbfbf;
}

body {
  background-color: var(--BG-CLR);
  color: var(--border-clr);
}

a {
  text-decoration: none;
  color: var(--border-clr);
  cursor: pointer;
}

.logo {
  position: absolute;
  font-size: 1.2rem;
  left: 3rem;
  transform: translateX(-50%);
  top: 1rem;
  font-weight: bold;
  text-decoration: none;
}

.button {
  background-color: var(--primary-btn-color);
  text-decoration: none;
  color: var(--BG-CLR);
  width: max-content;
  padding: 0.5em 1.5em;
  border: 1.5px solid var(--primary-btn-color);
  border-radius: 0.25rem;
  cursor: pointer;

  font-size: 0.9rem;

  transition: background-color, 300ms;
}

.button:hover {
  border-color: var(--primary-btn-hover);
  background-color: var(--primary-btn-hover);
}

.default {
  background-color: var(--BG-CLR);
  color: var(--border-clr);
  border: 2px var(--border-clr) solid;
  transition: background-color, 300ms;
}

.default:hover {
  background-color: rgb(213, 223, 232);
}

.footnote {
  position: absolute;
  font-size: 0.6rem;
  right: 1.8rem;
  bottom: 1.8rem;
}

.link {
  font-weight: 600;
}

@media screen and (max-width: 41rem) {
  .footnote {
    right: 2rem;
    bottom: 4.5rem;
  }
}