:root {
  --indigo: #1C1F3A;
  --silver: #BCC2C6;
  --crimson: #A6333F;
  --olive: #C2C63E;
  --gray: #3E404D;
  --white: white;
}

body {
  overflow: auto;
  background: black;
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: white;
}

@font-face {
  font-family: TitleFont;
  src: url("../assets/titlefont.otf") format("opentype");
}

#background-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* ensure it's behind your content */
  overflow: hidden;
}

.footer-font {
  color: white;
}

.footer-icon {
  color: var(--olive);
  transition: filter 0.3s ease;
  font-size: 1.5em;
}


.nav-link.footer-icon:hover,
.nav-link.footer-icon:hover i {
  color: var(--olive) !important;
  filter: brightness(0.8);
}


.navbar-nav .nav-link.active {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: filter 0.3s ease;
}

.navbar-nav .nav-link.active:hover {
  filter: brightness(0.8);
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  .subtitle-font {
    font-family: 'TitleFont';
    font-size:1.5rem;
  }
  
}

@media (max-width: 600px) {
  #content-container {
    width: calc(100% - 2rem); /* Subtracting 2rem leaves 1rem on each side */
  }
}


#content-container {
  min-height: 80vh;  /* Optional: sets a minimum height */
  height: auto;      /* Allows vertical growth as needed */
}

.highlight {
  color: var(--olive)
}