@charset "UTF-8";

@font-face {
  font-family: 'beefdregular';
  src: url('webfontkit1/beefd-webfont.woff2') format('woff2'),
       url('webfontkit1/beefd-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #2484c6;
  font-family: 'beefdregular', sans-serif;
  display: flex;
  flex-direction: column;
}

body.noscroll {
  overflow: hidden;
  background-color: #2484c6;
}

header {
  display: none;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer {
  display: none;
  background-color: #165580;
  padding: 0.5em 0;
  text-align: center;
}

footer p {
  font-size: clamp(0.5rem, 1.5vw, 0.9rem);
  margin: 0;
  color: #c9c7c9;
}

.map-container {
  display: none;
  width: 100%;
  text-align: center;
}

.nj {
  background: url("nj.png") no-repeat center center;
  background-size: contain;
  width: clamp(1000px, 90vw, 1600px);  /* <-- KEY CHANGE */
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.falls {
  position: absolute;
  top: 22%;  /* adjust to lock it visually to the map */
  left: 58%; /* adjust to lock it visually to the map */
  width: 7%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("falls2.gif") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.trail {
  position: absolute;
  top: 10%;  /* adjust to lock it visually to the map */
  left: 51.5%; /* adjust to lock it visually to the map */
  width: 9%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("trail2.gif") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.star {
  position: absolute;
  top:43%;  /* adjust to lock it visually to the map */
  left: 51%; /* adjust to lock it visually to the map */
  width: 7%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("star.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.light {
  position: absolute;
  top: 40%;  /* adjust to lock it visually to the map */
  left: 65%; /* adjust to lock it visually to the map */
  width: 7%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("light.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.temple {
  position: absolute;
  top: 32%;  /* adjust to lock it visually to the map */
  left: 47%; /* adjust to lock it visually to the map */
  width: 8%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("temple.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.roll {
  position: absolute;
  top: 60%;  /* adjust to lock it visually to the map */
  left: 42%; /* adjust to lock it visually to the map */
  width: 5%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("roll.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.rodeo {
  position: absolute;
  top: 72%;  /* adjust to lock it visually to the map */
  left: 36%; /* adjust to lock it visually to the map */
  width: 12%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("rodeo2.gif") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.berries {
  position: absolute;
  top: 55%;  /* adjust to lock it visually to the map */
  left: 58%; /* adjust to lock it visually to the map */
  width: 7%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("berries2.gif") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.taffy {
  position: absolute;
  top: 85%; /* adjust to lock it visually to the map */
  left: 47%; 
  width: 7%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("taffy.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.devil {
  position: absolute;
  top: 68%;  /* adjust to lock it visually to the map */
  left: 52%;/* adjust to lock it visually to the map */
  width: 8%; /* scales with NJ map */
  aspect-ratio: 1 / 1;
  background: url("devil.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
}


h1 {
  background-color: #165580;
  padding: 0.7em 1.5em;
  font-size: clamp(1.5rem, 6vw, 3rem);
  color: #ffca66;
  text-align: center;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.popup-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  padding-top: 2rem;
}

.popup {
  width: 90%;
  max-width: 700px;
  aspect-ratio: 928 / 461;
  background: url('popup.png') no-repeat center center;
  background-size: contain;
  background-color: transparent;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: 5%;
  overflow: visible;
}

.close-popup {
  margin-top: 1.5rem;
  font-size: clamp(0.65rem, 1.5vw, 1.2rem);
  background-color: #165580;
  color: #c9c7c9;
  padding: 0.5em 1.5em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 1001;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  white-space: nowrap;
  font-family: 'beefdregular';
}

.popup p {
  font-size: clamp(0.65rem, 2vw, 1.2rem);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  width: 90%;
  color: #c9c7c9;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.close-popup {
  font-size: clamp(0.65rem, 1.5vw, 1.2rem);
  background-color: #165580;
  color: #c9c7c9;
  padding: 0.5em 1.5em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 1001;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  white-space: nowrap;
  font-family: 'beefdregular';
  margin-top: 1.5rem;
}

.badges {
  display: inline-block;
  background-color: #165580;
  color: #ffca66;
  padding: 0.5em 1.5em;
  text-decoration: none;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-family: 'beefdregular', sans-serif;
  border-radius: 0; /* flat edges to match your style */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}


@media (min-width: 1000px) {
  .popup {
    max-width: 850px;
  }
}