styles.css

@import url("https://fonts.googleapis.com/css?family=Rubik+Beastly|Red+Hat+Mono");

:root {
  --header-font: "Rubik Beastly";
  --main-font: "Red Hat Mono";
  --beige: #010101;
  --gray: #485b63;
  --hover: #0d6efd;
}

* {
  font: 16px/1 monospace;
}

.navbar {
  background: #d3d3d3;
}

.navbar-title {
  font: 24pt/1 var(--header-font);
  color: var(--beige);
}

.quarto-listing-category-title {
  color: var(--hover);
}

.listing-category:hover {
  background-color: var(--hover);
  transition-delay: 0.1s;
}

.category:hover {
  color: var(--hover);
}

.menu-text {
  color: var(--beige);
}

.menu-text:active,
.menu-text:hover {
  font-weight: bold;
  color: var(--hover);
}

.nav-link {
  color: var(--beige);
}

.nav-link:active {
  color: var(--beige);
}

i.bi {
  display: inline-block;
  transition: transform 0.3s ease-out; /* add a transition effect */
}

i.bi:hover {
  transform: scale(1.2);
  z-index: 1; /* bring the element to the front */
  position: relative; /* set a relative position to enable z-index */
  color: var(--hover);
}

.navbar-toggler-icon {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.navbar-toggler-icon:hover {
  transform: scale(1.2);
}
.aa-DetachedSearchButton {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.aa-DetachedSearchButton:hover {
  transform: scale(1.2);
  color: var(--hover);
}

h3.no-anchor.listing-title:hover,
div.about-links:hover {
  color: var(--hover);
}

.quarto-title-banner {
  background: black;
}

.quarto-category:hover {
  transform: scale(1.1);
}

.g-col-1:hover {
  transform: scale(1.05);
}