<section id="camp-activities-inquiry">
  <h1>Camp Activities Inquiry</h1>
  <form action="/submit-form" method="POST">
    <label for="activity-select">Which camp activities are you most looking forward to?</label>
    <select id="activity-select" name="activity">
      <option value="">--Please choose an option--</option>
      <option value="hiking">Hiking</option>
      <option value="canoeing">Canoeing</option>
      <option value="fishing">Fishing</option>
      <option value="crafts">Crafts</option>
      <option value="archery">Archery</option>
    </select>

    <label for="food-allergies">Food Allergies (if any)</label>
    <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>

    <label for="additional-info">Additional things the counselor should know</label>
    <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>

    <button type="submit">Submit</button>
  </form>
</section>

@import url("https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Gloria Hallelujah", cursive;
  background-image: url("https://i.postimg.cc/7LsyBpqb/Simpsons-Background-Removed.webp");
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  transform: scale(0.9);
}

@media (max-width: 568px) {
  body {
    background-image: url("https://i.postimg.cc/8CvTrrfN/s-bg.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1);
  }
}

h1:before {
  content: "";
  width: 100%;
  height: 260px;
  background-image: url("https://i.postimg.cc/hGFFYmSz/Camp-k.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  margin-bottom: 2rem;
  filter: drop-shadow(0px 5px 6px #666);
}

h1 {
  font-family: "Gloria Hallelujah", sans-serif;
  color: #ffda0a;
  font-size: 2.5rem;
  line-height: 3.2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.9);
  margin-block: unset;
  background-repeat: no-repeat;
  background-position: top;
}

#camp-activities-inquiry {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 2rem;
}

form {
  background-image: url("https://i.postimg.cc/RZF2DsqD/Post-it-Note-paper-craft-Background-Removed.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6rem 5rem 5rem 5rem;
  margin: 16px 32px 64px 32px;
  box-sizing: border-box;
  width: 550px;
  font-family: "Gloria Hallelujah", sans-serif;
  font-weight: 400;
  line-height: 2rem;
  font-size: 1.5rem;
  text-align: center;
  gap: 1rem;
}

#activity-select {
  font-family: "Gloria Hallelujah", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
  margin: 8px 0 8px 0;
  width: 90%;
  border-radius: 17px;
  border: 2px solid #000;
  padding: 5px 5px;
}

#activity-select:hover {
  cursor: pointer;
}

#activity-select:focus-visible {
  border: 2px solid #ffda0a;
  outline: unset;
}

#food-allergies,
#additional-info {
  font-family: "Gloria Hallelujah", sans-serif;
  font-weight: 600;
  line-height: 1.3rem;
  font-size: 1.2rem;
  margin: 4px 0 8px 0;
  width: 80%;
  border-radius: 17px;
  border: 2px solid #000;
  height: 64px;
  resize: none;
  padding: 1rem;
}

#food-allergies:focus-visible,
#additional-info:focus-visible {
  border: 2px solid #ffda0a;
  outline: unset;
}

button {
  border: unset;
  width: 50%;
  padding: 4px 0;
  font-family: "Gloria Hallelujah", sans-serif;
  font-size: 24px;
  border-radius: 18.5px;
  background-color: #fff;
  color: black;
}

button:hover {
  cursor: pointer;
  background-color: #ffda0a;
}

button:active {
  background-color: ffda0a;
  color: #000;
  border: 2px solid #000;
}

document.addEventListener("DOMContentLoaded", function () {
  const activitySelect = document.getElementById("activity-select");
  const header = document.querySelector("h1");

  const backgroundImages = {
    hiking: 'url("https://i.postimg.cc/fTtSj4kz/hiking.png")',
    canoeing: 'url("https://i.postimg.cc/PxJ5XZwX/canoeing.png")',
    fishing: 'url("https://i.postimg.cc/DyvJHWCz/fishing.png")',
    crafts: 'url("https://i.postimg.cc/Y9Bj3jGM/crafts.png")',
    archery: 'url("https://i.postimg.cc/rwdm255q/archery.png")'
  };

  activitySelect.addEventListener("change", function () {
    const selectedActivity = this.value;
    const imageUrl = backgroundImages[selectedActivity];
    if (imageUrl) {
      header.style.backgroundImage = imageUrl;
    }
  });

  document.getElementById("activity-select").required = true;
  activitySelect.querySelector("option").disabled = true;
  activitySelect.querySelector("option").selected = true;
});