h1 {
color: white;
text-align: center;
}

body {
color: white;
text-align: center;
background-color: black;
}

@font-face {

  font-family: 'heavitas';
  src:
       url('Heavitas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}
.middle-strip {
    width: 60%; /* Adjust width as needed */
    background-size: auto;
    background-size: repeat;
    height: auto;
    margin: auto; /* Centers it */
    text-align: center;
    justify-content: center; /* Centers content inside */
    align-items: center;
}
.responsive-text {
    font-size: clamp(2px, 2vw, 18px);   
}
/*^14px → Minimum font size (prevents text from getting too small)
2vw → Scales with viewport width
24px → Maximum font size */

.navbar-container {
    display: flex;
    justify-content: space-evenly;
}
nav {
    display: flex;
    justify-content: space-evenly; /* Equal spacing between links */
    align-items: center;
}
nav a:first-child {
    margin-right: auto; /* Pushes first link to the left edge */
}

nav a:last-child {
    margin-left: auto; /* Pushes last link to the right edge */
}

.preformatted {
    white-space: pre;
}

/* Style buttons */
.btn {
  background-color: white;
  border: none;
  color: black;
  padding: 0px 30px;
  cursor: pointer;
  font-size: 14px;
  font: Andales Mono;
}
p {
    max-width: 600px; /* Limits paragraph width */
    margin: auto; /* Centers it */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: Grey;
}

.image-map-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1108px; /* Matches image width */
  text-align: center;
}

.image-map-container img {
  width: 60vw;
  min-width: 250px;
  height: auto;
  display: block;
}

/* The clickable zones */
.zone {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0); /* Fully transparent normally */
  transition: background 0.3s ease;
  cursor: pointer;
}

/* On hover, show a slight highlight */
.zone:hover {
  background: rgba(255, 255, 255, 0.1); /* Faint white overlay */
}

.zone.home {
  top: 0%;
  height: 11.07%;
}

.zone.releases {
  top: 11.07%;
  height: 11.07%;
}

.zone.events {
  top: 22.14%;
  height: 16.93%;
}

.zone.archive {
  top: 39.06%;
  height: 19.53%;
}

.zone.contact {
  top: 58.59%;
  height: 19.53%;
}

.zone.roster {
  top: 78.12%;
  height: 21.88%;
}