@font-face {
  font-family: Rajdhani;
  src: url(/fonts/Rajdhani-Regular.ttf);
}
.hero-container {
  height: 20rem;
}

.hero {
  width: 100%;
  height: 100%;
}

.banner {
  padding: 0.17rem 0.32rem;
  background: #f3c333;
}

hr {
  width: 75%;
  height: 0.1rem;
}

h1 {
  letter-spacing: 2rem;
}

h3 {
  letter-spacing: 0.2rem;
}

h5 {
  letter-spacing: 0.2rem;
}

sup {
  letter-spacing: 0.2rem;
}

.featured {
  position: relative;
  isolation: isolate;
}

.featured::after {
  background-image: url(../images/rokos-basilisk.png);
  background-size: cover;
  content: "";
  position: absolute;
  opacity: 0.3;
  inset: 0;
  z-index: -1;
}

.navbar-toggler {
  background-color: #f3c333;
}

.quote {
  font-family: Rajdhani;
  letter-spacing: 0.2rem;
}

.category-item a {
  cursor: pointer;
}

.subcategory-list {
  display: none;
  list-style: none;
}

.active {
  display: block;
}

li a:hover {
  color: #f3c333 !important;
}

#login:hover,
button:hover {
  color: white !important;
}

a i {
  color: white;
}

a i:hover {
  color: #f3c333;
}

.reference:target {
  border-radius: 3px;
  animation: highlight 4s linear;
}

@keyframes highlight {
  0% {
    background-color: hsl(45, 80%, 68%);
  }
  100% {
    background-color: none;
  }
}