:root {
  --ab-hero-overlay: rgba(0, 0, 0, 0.4);
  --hyh-bg: #660000;
  --hyh-card: #141420;
  --hyh-border: rgba(255,255,255,0.08);
  --hyh-text: rgba(255,255,255,0.88);
  --hyh-muted: rgba(255,255,255,0.65);
}

body {
  background: var(--hyh-bg);
  background: var(--hyh-bg) url("/assets/images/background.jpg") repeat top left;
  color: var(--hyh-text);
}

a { color: #9fd3ff; }

.creepyheader {
	font-family:buffied;
	font-size:3.8em;
	text-shadow: 3px 3px 7px #111;
	color:#33CC00;
	text-wrap:none;}
	h2.dept-title a {color:#33CC00;}
	@font-face {
	  font-family: buffied;
	  src: url('/assets/css/buffied.TTF');
	}
	<!--Buffied font permissions in process. Designed by Gemfonts and Graham Meade gem@c031.aone.net.au; this is a testing page-->
	.maps {
	        width: 100%;
	        height: 450px;
	        max-height: 450px !important;
	    }
}

.text-muted { color: var(--hyh-muted) !important; }

.hero-carousel .carousel-item {
  min-height: 520px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.hero-carousel .carousel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ab-hero-overlay);
}

.hero-carousel .carousel-caption {
  position: absolute;
  right: 12%;
  left: 12%;
  bottom: 18%;
  text-align: left;
  z-index: 2;
}

.hero-carousel .carousel-caption h1,
.hero-carousel .carousel-caption h2,
.hero-carousel .carousel-caption p {
  color: #fff;
}

.hero-carousel .carousel-caption .btn {
  margin-top: 10px;
}

.section {
  padding: 48px 0;
}

.card {
  background: var(--hyh-card);
  border: 1px solid var(--hyh-border);
}

.card-service {
  height: 100%;
}

.site-footer {
  padding: 20px 0;
  background: #050507;
  color: var(--hyh-muted);
  margin-top: 0px;
  border-top: 1px solid var(--hyh-border);
}

.bio-photo {
  max-width: 240px;
  margin: 0 20px 12px 0;
}
@media (max-width: 300px) {
  .bio-photo {
    float: none !important;
    display: block;
    margin: 0 auto 15px auto;
    max-width: 70%;
  }
}

.page-hero {
  --hero-image: none;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.25) 100%),
    var(--hero-image);
  color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 44px 0;
  min-height: 300px;
}

/* Sound effects page */
.hyh-sound-title {
  font-weight: 500;
}

.hyh-sound-actions {
  display: inline-flex;
  gap: 0.5rem;
}

.hyh-icon svg {
  display: block;
  fill: currentColor;
}

.hyh-now-playing {
  border-left: 4px solid rgba(0,0,0,.2);
}

.page-hero.keep-bottom { background-position: center bottom; }

.badge-pill {
  border: 1px solid var(--hyh-border);
}

.table-darkish {
  background: var(--hyh-card);
  border: 1px solid var(--hyh-border);
}

.table-darkish td,
.table-darkish th {
  border-top: 1px solid var(--hyh-border);
}

.card {
  background: var(--hyh-card);
  border: 1px solid var(--hyh-border);
}

.card .card-title { color: rgba(255,255,255,0.92); }

.list-group-item{
  background-color: rgba(255, 255, 255, 0.5);
  border-color: var(--hyh-border);
  color: #111; /* dark label text */
}
.list-group-item a{
  color: #111;
}
.list-group-item.active{
  background-color: rgba(255, 255, 255, 0.7);
  color: #111;
  border-color: var(--hyh-border);
}

.sticky-bottom{
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 1020; /* above content */
}

.hyh-topbar{
  position: relative; /* needed for the overlay line */
}

.hyh-topbar-img{
  max-height: 90px;   /* adjust */
}

/* black line that covers the bottom 5px of header content */
.hyh-topbar::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: #000;
  z-index: 2;
  pointer-events: none;
}

/* Wrapper will be created by JS; these styles apply once it exists */
#logo-seq-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

#logo-seq-wrap > img#logo {
  display: block;
}

#logo-seq-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps png aspect inside the same box */
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s linear; /* used for the 2s fade at the end */
}

.bg-black { background-color: #000 !important; }

/* Bootstrap 4: make btn-primary "blood red" */
.btn-primary {
  background-color: #8B0000; /* blood red */
  border-color: #8B0000;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #5A0000; /* darker on hover/focus */
  border-color: #5A0000;
  color: #fff;
}

/* optional: better focus ring */
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.35);
}

/* optional: pressed state */
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: #4A0000;
  border-color: #4A0000;
}

/* optional: disabled state */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #8B0000;
  border-color: #8B0000;
  opacity: 0.65;
}

/* Bootstrap 4: outline primary -> blood red */
.btn-outline-primary {
  color: #ffffff;
  border-color: #8B0000;
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: #8B0000;
  border-color: #8B0000;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #5A0000; /* darker on active */
  border-color: #5A0000;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #8B0000;
  border-color: #8B0000;
  background-color: transparent;
  opacity: 0.65;
}

/* optional: focus ring */
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.35);
}

/* Global link color */
a {
  color: #d73333;          /* medium pink */
  text-decoration: none;   /* optional - remove underline */
}

a:hover,
a:focus {
  color: #a61f1f;          /* darker pink on hover */
  text-decoration: underline; /* optional - show underline on hover */
}

/* Keep "button red" for links styled as buttons */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-outline-primary,
a.btn-outline-primary:hover,
a.btn-outline-primary:focus {
  text-decoration: none; /* prevents underlines on button links */
}

/* Optional: visited links (if you want same as normal) */
a:visited {
  color: #d73333;
}

/* Optional: active/pressed state uses the same dark red as your buttons */
a:active {
  color: #5A0000; /* same dark red shade used in buttons */
}