/* Benthos related CSS */

:root {
  --brand-primary-dark: #00205f; /* deep space blue */
  --brand-primary: #003e7e; /* dark teal */
  
  --brand-accent-dark: #9C92A3; /* lilac ash */
  --brand-accent: #C6B9CD; /* thistle */
  --brand-accent-light: #D6D3F0; /* lavender */

  --brand-primary-transparent-120: #00205fC0;
  --brand-primary-transparent-30: #00205f30;

  --bioluminescence: #00FFDE;
  --bioluminescence-transparent-60: #00FFDE60;
}

@font-face {
  font-family: "vt323";
  src: local("Vt323"),
       url("../fonts/vt323.ttf") format("truetype")
}

.custom-navbar {
  background-color: var(--brand-primary-transparent-120) !important;
}

/* .navbar-brand {
  font-size: 24px;
} */

.custom-navbar .nav-link,
.custom-navbar .navbar-brand {
  color: white !important;
}

/* .custom-nav .nav-item {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
} */

/* .custom-nav .nav-link {
  font-size: 18px;
  transition: color 0.5s ease;
}

.custom-nav .nav-link:hover {
  color: var(--bioluminescence) !important;
} */

.custom-body {
  background-color: var(--brand-primary) !important;
  background-image: url("../images/PitchBG1.png");
}

.custom-main {
  font-family: "vt323", monospace !important;
}

h1 {
  color: white !important;

  font-size: 64px;
  text-shadow: 0 0 10px white;
}

.benthos-panel {
  background-color: var(--brand-primary-transparent-30);
  backdrop-filter: blur(10px);

  border-radius: 8px;

  padding: 1.5rem;
  height: 100%;

  transition: all 0.3s ease;
}

.benthos-panel:hover {
  background-color: var(--brand-primary-transparent-30);
  backdrop-filter: blur(10px);

  box-shadow: 2px 2px 5px var(--brand-primary-transparent-120);

  transform: translateY(-3px);
}

#benthos-info h2,
#benthos-links h2,
#benthos-screenshots h2 {
  color: white !important;

  font-size: 42px;
  text-shadow: 0 0 10px var(--bioluminescence);
}


#benthos-info p {
  color: white !important;
  text-shadow: 1px 1px 5px black;
}


#benthos-links a {
  color: white !important;
  text-shadow: 1px 1px 5px black;
  text-decoration: none;

  border: 2px solid var(--bioluminescence);
  border-radius: 8px;

  transition: background-color 0.3s ease;
}

#benthos-links a:hover {
  background-color: var(--bioluminescence-transparent-60);
}

.thumbnail-glow {
  transition: all 0.3s ease;
}

.thumbnail-glow:hover {
  box-shadow: 2px 2px 5px var(--brand-primary-transparent-120);
  transform: scale(1.02);
}