:root {
  --bs-body-font-family: "Inter", sans-serif;

  --link-color-rgb: 52, 152, 219;
}

/* Theme Colors */

@media (prefers-color-scheme: light) {
  :root {
    --bs-body-bg: rgb(255, 255, 255);
    --bs-body-color: rgba(55, 53, 47, .65);

    --heading-color: rgb(55, 53, 47);
    --muted-color: rgba(70, 68, 64, .45);
    --border-color: rgba(55, 53, 47, .09);
    --img-bg: rgba(55, 53, 47, .06);

    --dr-btn-secondary-bg: rgb(255, 255, 255);
    --dr-btn-secondary-hover-bg: rgba(55, 53, 47, .06);
    --dr-btn-secondary-active-bg: rgba(55, 53, 47, .16);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: rgb(0, 0, 0);
    --bs-body-color: rgb(115, 115, 115);

    --heading-color: rgb(215, 215, 215);
    --muted-color: rgb(85, 85, 85);
    --border-color: rgb(35, 35, 35);
    --img-bg: rgb(15, 15, 15);

    --dr-btn-secondary-bg: rgb(20, 20, 20);
    --dr-btn-secondary-hover-bg: rgb(30, 30, 30);
    --dr-btn-secondary-active-bg: rgb(40, 40, 40);
  }
}

/* Base Elements */

.container {
  max-width: 800px;
  padding: 3rem 1rem;
}

.divider {
  margin: 3rem 0;
  border-top: 1px solid var(--border-color);
  opacity: 1;
}

.card-img-top,
.card-img-bottom {
  background-color: var(--img-bg);
  border-radius: var(--bs-border-radius-lg);
}

/* Typography Utilities */

.text-heading {
  color: var(--heading-color);
}

.text-muted {
  color: var(--muted-color) !important;
}

/* Buttons */

.link {
  color: rgba(var(--link-color-rgb));
  -webkit-text-decoration-color: rgba(var(--link-color-rgb), 0);
  text-decoration-color: rgba(var(--link-color-rgb), 0);
}

.link:hover,
.link:focus-visible {
  -webkit-text-decoration-color: rgba(var(--link-color-rgb), 1);
  text-decoration-color: rgba(var(--link-color-rgb), 1);
  text-underline-offset: .25em;
  outline: none;
}

.dr-btn-secondary {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-color: var(--heading-color);
  --bs-btn-bg: var(--dr-btn-secondary-bg);
  --bs-btn-border-color: var(--border-color);
  --bs-btn-border-radius: var(--bs-border-radius-lg);
  --bs-btn-hover-color: var(--heading-color);
  --bs-btn-hover-bg: var(--dr-btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--border-color);
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--heading-color);
  --bs-btn-active-bg: var(--dr-btn-secondary-active-bg);
  --bs-btn-active-border-color: var(--border-color);

  display: flex;
  align-items: center;
  text-align: start;
  transition-duration: .2s;
}

.dr-btn-secondary .bi {
  margin-right: .75rem;
}

/* Responsive Utilities */

@media (max-width: 360px) {
  .dr-row-cols>* {
    width: 100%;
  }
}

/* Third Party Components */

.bi {
  fill: currentColor;
  width: 1em;
  height: 1em;
}