@font-face {
  font-family: 'KodeMonoRegular';
  src: url('/static/mainapp/fonts/Kode_Mono/static/KodeMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PermanentMarkerRegular';
  src: url('/static/mainapp/fonts/Permanent_Marker/PermanentMarker-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'SonoRegular';
  src: url('/static/mainapp/fonts/Sono/static/Sono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GaladaRegular';
  src: url('/static/mainapp/fonts/Galada/Galada-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TacOne';
  src: url('/static/mainapp/fonts/Tac_One/TacOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.responsive-video {
    max-width: 100%; /* Makes the video width responsive to the container */
    height: auto;    /* Keeps the video aspect ratio intact */
}



body {
  font-family: 'SonoRegular', sans-serif;
  background-color: #f8f9fa;
  color: #111;
}

main {
  background-color: white;
}

#main-nav {
  --bs-navbar-color: #111;
  --bs-navbar-hover-color: #e60b0b;
  --bs-navbar-active-color: #e60b0b;
  --bs-navbar-brand-color: #111;
  --bs-navbar-brand-hover-color: #e60b0b;

  background: #f8f9fa;
}

.navbar-brand {
  font-size: clamp(1.2rem, 2vw, 2.0rem);
}

.nav-link {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.icon-link {
  color: #e60b0b;
  text-decoration: none;
}

.icon-link:hover {
  color: #111;
}