:root {
  --font-text: "Titillium Web", sans-serif !important;
  --font-heading: "Titillium Web", sans-serif !important;
  --header-opacity: 85%;
  --border-radius: 10px;
}

/* Typography -> Headings (zuvi font.css override)*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff;
  color: var(--color-heading);
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
}

/* Dev: Make the site/slogan div stop 
 * humping the site logo. Things get 
 * crunched without this.
 */
.site-name-slogan {
  text-align: center;
}

@media (min-width: 852px) {
  .site-name-slogan {
    margin-left: 2em;
  }
}

@media (max-width: 852px) {
  .site-name-slogan {
    margin-left: 1em;
  }
}

.site-name-slogan .site-name {
  color: #ddd;
  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
  a, a:visited {
    color: #fff;
  }
  a:hover, a:active {
    color: var(--pink);
  }
}

.header-top {
  background-color: color-mix(in srgb, var(--header-bg) var(--header-opacity), rgba(0,0,0,0));
  a, a:visited, a:active {
    color: white;
  }
}

@media (min-width: 992px) {
  .header-top {
    backdrop-filter: blur(5px);
  }
}