html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* Header height on mobile */
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 145px; /* Header height on desktop */
  }
}

body {
  font-family: "Outfit", sans-serif;
  background-color: #ffffff;
  color: #000000;
}

h1,
h2,
h3,
h4,
.serif {
  font-family: "Source Serif 4", serif;
}

.border-black-thin {
  border: 1px solid #000000;
}

.border-black-thick {
  border: 2px solid #000000;
}

.rule-top {
  border-top: 1px solid #000000;
}

.rule-bottom {
  border-bottom: 1px solid #000000;
}

.double-rule-bottom {
  border-bottom: 3px double #000000;
}

.vertical-divider {
  border-right: 1px solid #000000;
}

.masthead-border {
  border-top: 4px solid #000000;
  border-bottom: 1px solid #000000;
}

.grayscale-filter {
  filter: grayscale(100%) contrast(120%);
}