<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=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


:root {
  --foreground: 0, 0, 0;
  --background: 255, 255, 255;
  --spacing: 1em;
  --radius: 0.5em;
  --fontSize: 1em;
  --fontFamily: 'Rubik';
  --arrow-bg: rgba(255, 255, 255, 0.3);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Caret_down_font_awesome.svg);
}

body {
  /* font-size: 20px; */
  font-family: var(--fontFamily);
  margin: 0;
  height: 100%;
  min-height: 100vh;
  padding-top: 15em;
  padding-bottom: 5em;
}

section {
  margin: 0 auto;
  color: rgba(var(--foreground), 1);
  background: rgba(var(--background), 1);
  max-width: 600px;
  box-shadow: 0 4px 40px rgba(var(--foreground), 0.2);
  padding: var(--spacing);
  border-radius: var(--radius);
  
  h1 {
    position: relative;
    text-align: center;
    padding: calc(var(--spacing)/2) calc(var(--spacing));
    background: rgba(var(--foreground), 1);
    color: rgba(var(--background), 1);
    display: block;
    width: max-content;
    transform: rotate(-3deg) translateY(-1.5em);
    margin: 0 auto;
    z-index: 1;
  }
  
  form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    > label {
      padding-top: var(--spacing);
    }
    > select {
      border-radius: var(--radius);
      appearance: none;
      border: 1px solid rgba(var(--foreground), 0.1);
      outline: 0;
      font: inherit;
      padding: 1rem 4rem 1rem 1rem;
      background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
        linear-gradient(to left, rgba(var(--background), 0.3) 3em, rgba(var(--background), 0.3) 3em);
      color: var(--foreground);
      cursor: pointer;
    }
    > textarea {
      color: rgba(var(--foreground), 1);
      padding: var(--spacing);
      border-radius: var(--radius);
      border: 1px solid rgba(var(--foreground), 0.1);
      background: rgba(var(--foreground), 0.05);
      &:focus {
        outline: none !important;
        border: 1px solid rgba(var(--foreground), 0.3); 
      }
    }
    > button {
      color: rgba(var(--background), 1);
      border: 1px solid rgba(var(--foreground), 1);
      background: rgba(var(--foreground), 1);
      border-radius: var(--radius);
      padding: var(--spacing);
      font-size: var(--fontSize);
      font-family: var(--fontFamily);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: rgba(var(--background), 0.8);
        background: rgba(var(--foreground), 0.9);
        transform: scale(1.01);
        transition: all 0.3s;
        box-shadow: 0 4px 24px rgba(var(--foreground), 0.1);
      }
    }
  }
}

#custom-activity-options {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 0;
  gap: calc(var(--spacing)/2);
}

.custom-option { 
  cursor: pointer;
  color: rgba(var(--foreground), 0.5);
  border: 1px solid rgba(var(--foreground), 0.1);
  box-sizing: border-box;
  width: calc(33% - var(--spacing)/2);
  padding: 0.625em;
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--spacing)/2);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: all 0.3s;
}

.custom-option:hover {
  background-color: rgba(var(--foreground), 0.05);
  color: rgba(var(--foreground),0.9);
  transition: all 0.3s;
  transform: scale(1.05);
  box-shadow: 0 4px 24px rgba(var(--foreground), 0.1);
}

.custom-option.active { 
  background-color: rgba(var(--foreground), 1);
  color: rgba(var(--background),1);
}

.icon {
    color: var(--foreground);
    position: relative;
    width: calc(var(--spacing)*2);
    height: calc(var(--spacing)*2);
}

.icon:before {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    color: inherit;
    background-color: currentColor;
    mask-position: center;
    mask-size: calc(var(--spacing)*2);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
}
    
.custom-option[data-value="hiking"] .icon:before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.857 10.078a.375.375 0 0 0-.26.11l-9.734 9.746.53.53 9.469-9.48 7.621 7.656.532-.529-7.887-7.923a.376.376 0 0 0-.27-.11Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.477 15.79a.375.375 0 0 0-.258.114L17.61 17.51 16 15.904a.375.375 0 0 0-.53 0l-1.608 1.606-1.609-1.606a.375.375 0 0 0-.53 0l-1.608 1.607-.676-.674a.376.376 0 0 0-.628.112.375.375 0 0 0 .1.418l.939.938a.375.375 0 0 0 .53 0l1.608-1.605 1.609 1.605a.375.375 0 0 0 .53 0l1.608-1.605 1.61 1.605a.375.375 0 0 0 .529 0l1.875-1.87a.376.376 0 0 0-.272-.645ZM8.615 11.578a.375.375 0 0 0-.261.112l-6.37 6.421.531.53 6.106-6.158 1.61 1.609.53-.53-1.877-1.874a.376.376 0 0 0-.27-.11ZM13.503 3.703v6.746h.75V3.703h-.75Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.668 15.696a.375.375 0 0 0-.26.643l1.125 1.125a.376.376 0 0 0 .618-.118.375.375 0 0 0-.088-.412l-1.125-1.125a.375.375 0 0 0-.27-.113ZM13.875 3.513a.375.375 0 0 0-.14.723l4.599 1.903-4.6 1.904a.375.375 0 1 0 .287.693l5.438-2.25a.375.375 0 0 0 0-.693l-5.438-2.25a.375.375 0 0 0-.146-.03Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.31 5.76a.375.375 0 0 0-.37.38v2.063a.375.375 0 1 0 .75 0V6.141a.374.374 0 0 0-.38-.381Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.689 6.888a.375.375 0 0 0-.142.723l1.268.53v2.312a.376.376 0 0 0 .526.343l3-1.313a.376.376 0 0 0-.006-.688l-4.5-1.875a.374.374 0 0 0-.146-.032Zm1.876 1.564 1.67.696-1.67.73V8.453Z' fill='%23000'/%3E%3Cpath d='M12 0C5.377 0 0 5.377 0 12s5.377 12 12 12 12-5.377 12-12S18.623 0 12 0Zm0 .75C18.218.75 23.25 5.782 23.25 12S18.218 23.25 12 23.25A11.244 11.244 0 0 1 .75 12C.75 5.782 5.782.75 12 .75Z' fill='%23000'/%3E%3Cpath d='M6.563 5.625A1.882 1.882 0 0 0 4.686 7.5c0 1.031.845 1.876 1.877 1.876A1.882 1.882 0 0 0 8.438 7.5a1.88 1.88 0 0 0-1.876-1.875Zm0 .751c.625 0 1.123.499 1.123 1.124 0 .625-.498 1.125-1.123 1.125A1.12 1.12 0 0 1 5.438 7.5c0-.625.5-1.124 1.125-1.124Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.188 4.313v.75h.75v-.75h-.75ZM6.188 9.938v.75h.75v-.75h-.75ZM9 7.125v.75h.75v-.75H9ZM3.375 7.125v.75h.75v-.75h-.75ZM4.573 4.982l-.53.53.53.53.53-.53-.53-.53ZM8.55 8.959l-.53.53.53.53.53-.53-.53-.53ZM8.55 4.982l-.53.53.53.53.53-.53-.53-.53ZM4.573 8.959l-.53.53.53.53.53-.53-.53-.53Z' fill='%23000'/%3E%3C/svg%3E");
  }
.custom-option[data-value="canoeing"] .icon:before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.581 5.7c0 1.101.9 2 2 2h4.8c1.101 0 2-.899 2-2v-.2c0-1.101-.899-2-2-2h-4.8c-1.1 0-2 .899-2 2v.2Zm.8 0v-.2c0-.672.528-1.2 1.2-1.2h4.8c.672 0 1.2.528 1.2 1.2v.2c0 .672-.528 1.2-1.2 1.2h-4.8c-.672 0-1.2-.528-1.2-1.2Z' fill='%23000'/%3E%3Cpath d='m0 5.6.277.281S5.463 11.2 12 11.2c6.537 0 11.723-5.319 11.723-5.319L24 5.6l-.277-.28S18.537 0 12 0C5.463 0 .277 5.32.277 5.32L0 5.6Zm1.21.002C1.723 5.102 6.237.8 12 .8s10.277 4.302 10.792 4.802c-.515.5-5.03 4.798-10.792 4.798-5.761 0-10.275-4.298-10.79-4.798Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m19.238 8.267.764.235.045-.143a9.424 9.424 0 0 0 0-5.532l-.045-.144-.764.236.044.142a8.633 8.633 0 0 1 0 5.062l-.044.144ZM3.24 8.245l.76.252.044-.133a8.176 8.176 0 0 0 0-5.158L4 3.075l-.76.252.045.132a7.377 7.377 0 0 1 0 4.653l-.044.133Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.22 6h6v-.8h-6V6ZM.375 6H6.82v-.8H.375V6ZM0 14.778C0 15.445.544 16 1.211 16h1.61a.4.4 0 0 0 .287-.12l.978-.999a.4.4 0 0 0 0-.56l-.978-1a.399.399 0 0 0-.285-.12l-1.61-.001C.544 13.2 0 13.755 0 14.422v.356Zm.8 0v-.356c0-.24.184-.422.412-.422l1.443.002.586.6-.586.598H1.213a.412.412 0 0 1-.413-.422Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.6 15h16.8v-.8H3.6v.8Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.8 14.61a.4.4 0 0 0 .114.271l.978.999a.4.4 0 0 0 .286.12h1.611c.667 0 1.211-.555 1.211-1.222v-.356c0-.668-.544-1.222-1.21-1.222l-1.612.002a.4.4 0 0 0-.286.12l-.978 1a.4.4 0 0 0-.114.289Zm.96-.008.587-.6L22.789 14a.41.41 0 0 1 .411.422v.356a.41.41 0 0 1-.41.422h-1.443l-.588-.598Z' fill='%23000'/%3E%3C/svg%3E");
  }
.custom-option[data-value="fishing"] .icon:before {
  mask-image: url("data:image/svg+xml,%3Csvg width='23' height='22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.262 6.736a.387.387 0 0 1 .381.393v.98c0 .747-.592 1.255-1.161 1.503a1.934 1.934 0 0 0-1.161 1.775 1.93 1.93 0 0 0 1.935 1.936 1.93 1.93 0 0 0 1.935-1.936v-.05l-.557.373a.386.386 0 1 1-.43-.644l1.16-.774a.387.387 0 0 1 .602.322v.774a2.715 2.715 0 0 1-2.71 2.71 2.715 2.715 0 0 1-2.71-2.71c0-1.108.668-2.066 1.626-2.485.39-.17.697-.486.697-.793v-.98a.387.387 0 0 1 .393-.394ZM14.771 3.48c.99.082 1.971.334 2.885.745a8.52 8.52 0 0 1 4.83 9.557c-.845 3.927-4.31 6.273-8.345 6.144-.89-.029-1.363-.096-1.795-.2-.349-.083-.704-.19-1.208-.308-.55 1.577-2.086 2.655-3.786 2.578a.387.387 0 0 1-.348-.512v-.008a.39.39 0 0 1 .074-.127c.609-.701 1.013-1.881 1.03-3.155.018-1.272-.354-2.483-.948-3.23a.387.387 0 0 1-.085-.241v-.048c0-.212.17-.384.383-.387 1.712-.02 3.18 1.123 3.668 2.737.469-.033.885-.035 1.15 0 .332.049.6.09 1.233-.008 1.368-.265 2.733-1.67 3.103-3.046a3.057 3.057 0 0 0-1.484-3.477c-1.238-.68-2.832-.448-3.781.587a.387.387 0 0 1-.671-.262V8.11H7.579a.387.387 0 0 1-.346-.559C8.757 4.501 11.8 3.224 14.77 3.47l.001.01Zm-.05.765c-2.46-.216-5.042.762-6.483 3.097h2.826c.214 0 .387.173.387.387v2.32c1.19-.811 2.757-.938 4.051-.227a3.84 3.84 0 0 1 1.858 4.357c-.453 1.69-1.956 3.272-3.707 3.609h-.016a4.606 4.606 0 0 1-1.474.008c-.338-.05-.598-.095-1.238 0a.388.388 0 0 1-.434-.304 3.044 3.044 0 0 0-2.293-2.344c.427.846.7 1.988.685 3.062-.014 1.044-.312 2.145-.739 2.953a3.055 3.055 0 0 0 2.348-2.29.387.387 0 0 1 .458-.291c.789.166 1.188.301 1.574.393.386.092.781.151 1.641.178 3.726.12 6.796-1.964 7.563-5.532a7.74 7.74 0 0 0-4.39-8.69 8.134 8.134 0 0 0-2.618-.684v-.002Z' fill='%23000'/%3E%3Cpath d='M4.256 4.032c.957 0 1.742.785 1.742 1.742 0 .958-.785 1.742-1.742 1.742a1.748 1.748 0 0 1-1.742-1.742c0-.957.785-1.742 1.742-1.742Zm0 .775a.962.962 0 0 0-.968.967c0 .54.429.968.968.968a.962.962 0 0 0 .968-.968.962.962 0 0 0-.968-.967Z' fill='%23000'/%3E%3Cpath d='M3.869 5.774a.387.387 0 1 0 .774 0 .387.387 0 0 0-.774 0Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.643 1v3.4H3.87V1h.774Z' fill='%23000'/%3E%3Cpath d='M12.223 6.184a.387.387 0 1 0 .774 0 .387.387 0 0 0-.774 0ZM18.803 7.46c.1.001.196.041.267.112a6.368 6.368 0 0 1 1.804 5.928c-.316 1.468-1.124 2.655-2.232 3.45a.386.386 0 0 1-.608-.377.388.388 0 0 1 .156-.252c.958-.687 1.65-1.695 1.928-2.985a5.587 5.587 0 0 0-1.586-5.208.387.387 0 0 1 .27-.668Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 .935v.774h21.676V.935H0Z' fill='%23000'/%3E%3C/svg%3E");
  }
.custom-option[data-value="crafts"] .icon:before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 17.438v.75h4.5v-.75h-4.5ZM9.75 20.438v.75h1.5v-.75h-1.5ZM9.75 18.938v.75h4.5v-.75h-4.5Z' fill='%23000'/%3E%3Cpath d='M11.813 0a7.506 7.506 0 0 0-7.5 7.5c0 3.057 1.801 5.155 3.554 6.274.77.491 1.509 1.51 1.509 2.34v5.448c0 .721.592 1.313 1.312 1.313h2.625c.72 0 1.313-.592 1.313-1.313v-5.447c0-.832.738-1.85 1.507-2.341 1.753-1.12 3.556-3.217 3.556-6.274 0-4.138-3.363-7.5-7.5-7.5h-.376Zm0 .75h.375a6.744 6.744 0 0 1 6.75 6.75c0 2.764-1.615 4.623-3.21 5.641-.96.614-1.852 1.746-1.852 2.974v5.448a.557.557 0 0 1-.563.562h-2.625a.557.557 0 0 1-.562-.563v-5.447c0-1.228-.894-2.36-1.855-2.974-1.594-1.018-3.208-2.877-3.208-5.641a6.744 6.744 0 0 1 6.75-6.75Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.626 2.068v11.24h.75V2.068h-.75Z' fill='%23000'/%3E%3Cpath d='M20.257 16.717c1.148.171 2.033 1.094 2.092 2.223a.375.375 0 1 1-.75.04c-.04-.76-.636-1.398-1.453-1.52-.818-.122-1.603.319-1.887 1.034a.375.375 0 1 1-.698-.277c.42-1.054 1.547-1.671 2.696-1.5Z' fill='%23000'/%3E%3Cpath d='M17.87 18.135c.298.028.589.138.834.33a.376.376 0 1 1-.461.593.858.858 0 0 0-.914-.085.816.816 0 0 0-.452.773.376.376 0 1 1-.75.043 1.574 1.574 0 0 1 .86-1.486c.278-.141.584-.196.882-.168ZM21.751 18.697c-.385.036-.761.18-1.078.427a.377.377 0 0 0 .461.593 1.327 1.327 0 0 1 1.414-.133c.457.233.727.702.699 1.202a.374.374 0 0 0 .5.38.377.377 0 0 0 .25-.337 2.025 2.025 0 0 0-1.108-1.913 2.075 2.075 0 0 0-1.138-.219Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.625 3.938v.75h9v-.75h-9ZM9 10.313v.75h9.376v-.75H9.001ZM15.376 3.938v.75h.75v-.75h-.75ZM11.626 14.063v.75h.75v-.75h-.75Z' fill='%23000'/%3E%3Cpath d='M3.745 13.717c-1.149.171-2.035 1.094-2.094 2.223a.376.376 0 0 0 .752.04c.04-.76.634-1.398 1.451-1.52.818-.122 1.603.319 1.887 1.034a.376.376 0 0 0 .699-.277c-.419-1.054-1.547-1.671-2.695-1.5Z' fill='%23000'/%3E%3Cpath d='M6.13 15.135a1.597 1.597 0 0 0-.833.33.375.375 0 1 0 .46.593.858.858 0 0 1 .914-.085c.296.15.47.452.452.773a.375.375 0 1 0 .75.043 1.573 1.573 0 0 0-.859-1.486 1.613 1.613 0 0 0-.883-.168ZM2.25 15.697c.386.036.76.18 1.077.427a.377.377 0 0 1-.036.633.376.376 0 0 1-.424-.04 1.33 1.33 0 0 0-1.415-.133 1.269 1.269 0 0 0-.699 1.202.376.376 0 1 1-.75.043 2.025 2.025 0 0 1 1.108-1.913 2.08 2.08 0 0 1 1.14-.219Z' fill='%23000'/%3E%3C/svg%3E");
  }
.custom-option[data-value="archery"] .icon:before {
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.563 21.563C4.29 21.563 0 17.273 0 12c0-5.273 4.29-9.563 9.563-9.563a9.63 9.63 0 0 1 4.43 1.086.404.404 0 0 1-.373.717 8.818 8.818 0 0 0-4.057-.995C4.735 3.245.808 7.172.808 12c0 4.828 3.927 8.755 8.755 8.755 4.828 0 8.755-3.927 8.755-8.755 0-1.47-.38-2.931-1.099-4.226a.404.404 0 0 1 .706-.392A9.537 9.537 0 0 1 19.126 12c0 5.273-4.29 9.563-9.563 9.563Z' fill='%23000'/%3E%3Cpath d='M9.563 18.017A6.024 6.024 0 0 1 3.546 12c0-3.318 2.7-6.017 6.017-6.017 1.15 0 2.273.335 3.246.969a.404.404 0 0 1-.44.677 5.129 5.129 0 0 0-2.806-.838A5.215 5.215 0 0 0 4.353 12a5.215 5.215 0 0 0 5.21 5.208c2.865 0 5.196-2.336 5.196-5.209 0-1.016-.286-1.99-.825-2.819a.404.404 0 0 1 .677-.44 5.95 5.95 0 0 1 .956 3.26c0 3.317-2.694 6.016-6.004 6.016Z' fill='%23000'/%3E%3Cpath d='M9.563 14.458A2.467 2.467 0 0 1 7.092 12a2.467 2.467 0 0 1 2.471-2.457c.126 0 .283 0 .44.04a.404.404 0 1 1-.196.783c-.06-.015-.158-.015-.244-.015-.917 0-1.663.74-1.663 1.65 0 .909.746 1.649 1.663 1.649.91 0 1.65-.74 1.65-1.65 0-.096-.01-.183-.021-.277l.397-.079.405-.011c.014.125.027.24.027.367a2.46 2.46 0 0 1-2.458 2.458ZM9.563 3.245a.404.404 0 0 1-.404-.404V.404a.404.404 0 0 1 .808 0v2.437c0 .223-.18.404-.404.404ZM1.95 24a.405.405 0 0 1-.352-.6l2.3-4.135a.404.404 0 0 1 .706.393l-2.3 4.134a.405.405 0 0 1-.353.208ZM17.162 24a.404.404 0 0 1-.354-.207l-2.3-4.135a.404.404 0 0 1 .706-.393l2.3 4.135a.404.404 0 0 1-.352.6Z' fill='%23000'/%3E%3Cpath d='M9.563 12.404a.403.403 0 0 1-.286-.69l6.6-6.598a.404.404 0 0 1 .57.57l-6.598 6.6a.403.403 0 0 1-.286.118Z' fill='%23000'/%3E%3Cpath d='M14.313 7.653a.404.404 0 0 1-.393-.312l-.328-1.41a.404.404 0 0 1 .106-.376l1.835-1.848a.404.404 0 0 1 .68.19l.341 1.409a.404.404 0 1 1-.784.19l-.173-.708-1.168 1.177.278 1.193a.404.404 0 0 1-.394.495Z' fill='%23000'/%3E%3Cpath d='M15.724 7.982a.406.406 0 0 1-.092-.01l-1.41-.33a.404.404 0 1 1 .183-.786l1.191.277 1.167-1.176-.693-.163a.404.404 0 1 1 .184-.786l1.397.329a.403.403 0 0 1 .194.677L16.01 7.862a.404.404 0 0 1-.286.12Z' fill='%23000'/%3E%3C/svg%3E");
  }

textarea#additional-info {
  background-image: url("data:image/svg+xml,%3Csvg width='82' height='75' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.1'%3E%3Cpath d='M48.656 41v30.5l-10.5-7.334H7.787c-3.386 0-6.131-2.758-6.131-6.158V31.323c0-3.4 2.745-6.157 6.131-6.157H33M80 8.157C80 4.757 77.255 2 73.869 2H39.13C35.745 2 33 4.757 33 8.157v40.176L43.5 41h30.369C77.255 41 80 38.241 80 34.841V8.157Z' stroke='%23000' stroke-width='3' stroke-miterlimit='10'/%3E%3Cpath d='M15.25 46.663a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM22.379 46.662a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM56.422 12.949c3.251 0 6.452 1.498 6.452 5.079 0 3.303-3.784 4.572-4.597 5.766-.61.888-.407 2.135-2.083 2.135-1.094 0-1.626-.888-1.626-1.701 0-3.025 4.442-3.709 4.442-6.199 0-1.372-.91-2.185-2.438-2.185-3.249.002-1.979 3.353-4.441 3.353-.891 0-1.652-.533-1.652-1.55-.001-2.491 2.843-4.698 5.943-4.698Zm-.126 14.63c1.141 0 2.083.94 2.083 2.083 0 1.145-.94 2.083-2.083 2.083a2.091 2.091 0 0 1-2.084-2.083c0-1.145.94-2.083 2.084-2.083Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
      background-position: right 0.5em bottom -1em;
  min-height: 9em;
}
textarea#food-allergies {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.1' fill='%23000'%3E%3Cpath d='M26.9 54.98c-1.94-5.88-4.58-5.67-7.82-5.88-3.24-.21-4.32-2.97-4.32-2.97-1.17-6.07-10.33-5.29-10.53-2.75-.64 8.27 5.42 9.02 6.22 9.14 1.34.21 4.28 1.33 6.01 4.33.13.22.28.42.46.62.11.12.25.24.38.36.07.06.13.12.2.18.19.15.4.29.61.42.02.01.05.03.07.04.23.14.48.26.73.38.01.01.03.01.04.02 3.75 1.69 9.59 1.08 7.95-3.89ZM12.12 46.9c.23.4.22.84-.02.98s-.63-.07-.86-.48c-.23-.41-.23-.85.02-.99.24-.13.62.09.86.49Zm-1.38-3.39c.24-.14.63.07.86.48.23.4.23.84-.02.98-.24.14-.63-.08-.86-.48-.23-.41-.22-.84.02-.98Zm-2.51.47c.24-.14.63.07.86.48.23.4.23.84-.02.98-.24.14-.63-.07-.86-.48-.23-.4-.22-.84.02-.98Zm12.9 8.89c-.39-.25-.58-.65-.43-.88.15-.23.59-.22.98.04.39.25.59.65.43.88-.15.23-.58.22-.98-.04Zm1.94 2.96c-.19.21-.62.12-.96-.2-.34-.32-.46-.74-.27-.94.19-.21.62-.12.96.2.34.32.46.74.27.94Zm.73-3.3c.24-.14.63.08.86.48.23.4.23.84-.02.98-.24.14-.63-.07-.86-.48-.23-.4-.23-.84.02-.98Zm1.19 4.09c-.24.14-.63-.08-.86-.48-.23-.4-.23-.84.02-.98.24-.14.63.07.86.48.23.4.22.84-.02.98ZM32.88 65.4c-4.47-4.29-6.7-2.87-9.66-1.54s-5.2-.6-5.2-.6c-3.87-4.82-11.61.16-10.6 2.49 3.3 7.61 9.01 5.43 9.78 5.17 1.29-.44 4.41-.83 7.34 1.01.21.13.45.24.7.33.16.06.33.1.5.13.09.02.17.05.27.07.24.04.49.07.74.08.03 0 .05.01.08.01.27.01.54.01.82-.01h.04c4.08-.24 8.96-3.51 5.19-7.14Zm-6-.17c.46.04.82.3.8.58-.03.28-.42.47-.89.43-.46-.04-.82-.3-.79-.58.02-.28.42-.47.88-.43Zm-11.84-.07c.15-.24.59-.23.99.02.39.25.59.64.44.88-.15.24-.59.23-.98-.02-.4-.25-.6-.64-.45-.88Zm-1.82-2.34c.15-.24.59-.23.98.02s.6.64.45.88c-.15.24-.59.23-.98-.02-.4-.25-.6-.64-.45-.88Zm-1.99 1.6c.15-.24.59-.23.99.02.39.25.59.64.44.88-.15.24-.59.23-.98-.02-.4-.25-.6-.64-.45-.88Zm17.71 3.8c-.45-.12-.76-.43-.68-.71.07-.27.5-.39.95-.27.45.12.76.44.68.71-.08.27-.5.39-.95.27Zm1.48-2.63c-.15.24-.59.23-.98-.02s-.6-.64-.45-.88c.15-.24.59-.23.98.02.4.25.59.64.45.88Zm1.53 2.16c-.15.24-.59.23-.99-.02-.39-.25-.59-.64-.45-.88.15-.24.59-.23.98.02.41.25.61.64.46.88ZM76.53 21.03c-.66 1.73-2.47 2.69-4.04 2.16-1.57-.54-2.3-2.37-1.64-4.1.66-1.73 5.14-5.01 5.14-5.01s1.2 5.22.54 6.95ZM76.85 28.84c-1.44 1.24-3.52 1.29-4.64.13-1.12-1.16-.86-3.11.58-4.35 1.44-1.24 7.03-2.17 7.03-2.17s-1.53 5.15-2.97 6.39ZM70.51 23.52c.44 1.79-.52 3.53-2.14 3.89-1.63.36-3.3-.8-3.74-2.59-.44-1.79 1.41-6.85 1.41-6.85s4.02 3.76 4.47 5.55ZM73.79 36.21c-1.68.93-3.72.59-4.57-.77-.85-1.36-.17-3.21 1.5-4.15 1.68-.93 7.35-.77 7.35-.77s-2.6 4.76-4.28 5.69ZM68.23 30.34c.71 1.71.03 3.56-1.52 4.14-1.55.58-3.39-.34-4.1-2.05-.71-1.71.34-6.97.34-6.97s4.57 3.17 5.28 4.88ZM71.25 42.82c-1.68.93-3.72.59-4.57-.77-.85-1.36-.17-3.21 1.5-4.15 1.68-.93 7.35-.77 7.35-.77s-2.6 4.76-4.28 5.69ZM65.69 36.95c.71 1.71.03 3.56-1.52 4.14-1.55.58-3.39-.34-4.1-2.05-.71-1.71.34-6.97.34-6.97s4.57 3.17 5.28 4.88ZM68.78 49.26c-1.68.93-3.72.59-4.57-.77-.85-1.36-.17-3.21 1.5-4.15 1.68-.93 7.35-.77 7.35-.77s-2.61 4.75-4.28 5.69ZM63.22 43.38c.71 1.71.03 3.56-1.52 4.14-1.55.58-3.39-.34-4.1-2.05-.71-1.71.34-6.97.34-6.97s4.56 3.17 5.28 4.88ZM31.24 7.26c.66 1.73 2.45 2.69 4 2.16 1.55-.54 2.28-2.37 1.62-4.1C36.2 3.59 31.78.31 31.78.31s-1.19 5.22-.54 6.95ZM30.92 15.07c1.43 1.24 3.48 1.29 4.59.13 1.11-1.17.85-3.11-.57-4.35-1.42-1.24-6.95-2.17-6.95-2.17s1.51 5.15 2.93 6.39ZM37.2 9.75c-.44 1.79.51 3.53 2.12 3.89 1.61.36 3.26-.8 3.7-2.59.44-1.79-1.4-6.85-1.4-6.85s-3.99 3.76-4.42 5.55ZM33.95 22.44c1.66.93 3.68.59 4.52-.77.84-1.36.17-3.21-1.49-4.15-1.66-.94-7.27-.77-7.27-.77s2.58 4.76 4.24 5.69ZM39.45 16.57c-.7 1.71-.03 3.56 1.5 4.14 1.54.58 3.35-.34 4.06-2.05.7-1.71-.34-6.97-.34-6.97s-4.52 3.17-5.22 4.88ZM36.46 29.06c1.66.93 3.68.59 4.52-.77.84-1.36.17-3.21-1.49-4.15-1.66-.93-7.27-.77-7.27-.77s2.58 4.75 4.24 5.69ZM41.96 23.18c-.7 1.71-.03 3.56 1.5 4.14 1.54.58 3.35-.34 4.06-2.05.7-1.71-.34-6.97-.34-6.97s-4.51 3.17-5.22 4.88ZM38.91 35.49c1.66.93 3.68.59 4.52-.77.84-1.36.17-3.21-1.49-4.15-1.66-.93-7.27-.77-7.27-.77s2.58 4.76 4.24 5.69ZM44.41 29.61c-.7 1.71-.03 3.56 1.5 4.14 1.53.58 3.35-.34 4.06-2.05.7-1.71-.34-6.97-.34-6.97s-4.52 3.17-5.22 4.88Z'/%3E%3Cpath d='M63.06 48c-.8-.37-1.76-.03-2.13.78-.19.4-4.16 9.03-5.32 18.93-1.47-18.31-8.65-32.16-8.97-32.77a1.602 1.602 0 0 0-2.16-.67c-.78.41-1.08 1.38-.67 2.16.05.1 3.49 6.73 6.07 16.69-3.29-5.69-9.16-12.15-19.28-13.98-19.15-3.47 4.99-.5 12.59 9.9 4.49 6.14 7.33 12 8.91 15.79.25 2.04.43 4.15.51 6.31.03.86.75 1.54 1.6 1.54h.06c.62-.03 1.13-.41 1.37-.93.27.39.7.67 1.21.69h.08c.85 0 1.56-.67 1.6-1.52.54-10.48 5.24-20.7 5.29-20.8.39-.79.05-1.75-.76-2.12ZM23.84 19.28C22.15 12.23 11.54 3.49 8.1 4.31 4.66 5.13-.82 17.74.87 24.79c1.69 7.05 7.78 9.76 14.12 8.23 6.35-1.51 10.54-6.69 8.85-13.74ZM5.28 23.76c.74 7.65-5.47-7.17 1.77-11.38 0-.01-2.51 3.73-1.77 11.38Z'/%3E%3C/g%3E%3C/svg%3E");         background-repeat: no-repeat;
      background-position: right 0.5em bottom 0em;
  min-height: 9em;
}

h1:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(var(--foreground), 1);
  top: 0;
  left: 0;
  z-index: -1;
}

h1:before {
  content: '';
  width: 10em;
  height: 10em;
  position: absolute;
  z-index: -2;
  top: -300%; /* Push it below the h1 element */
  left: 50%; /* Center it horizontally */
  transform: translateX(-50%);
  background: rgba(var(--background), 1);
  box-shadow: 0 -1em 1em rgba(var(--foreground), 0.1);
  border-radius: 100%;
  background-color: rgba(var(--foreground), 1);
  mask-image: url("data:image/svg+xml,%3Csvg width='90' height='90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M87.237 43.703H73.891a28.137 28.137 0 0 0-.429-3.812h9.843a1.952 1.952 0 0 0 1.525-3.171l-3.271-4.86h1.738a1.953 1.953 0 0 0 1.62-3.043l-3.358-4.988h1.746a1.953 1.953 0 0 0 1.525-3.172L71.941 1.511a1.954 1.954 0 0 0-3.24 0l-11.914 17.7a27.637 27.637 0 0 0-10.658-2.129c-3.026 0-5.938.493-8.667 1.391L31.109 8.146l2.784-4.528a1.953 1.953 0 1 0-3.327-2.047l-1.751 2.847-1.751-2.847a1.954 1.954 0 0 0-3.327 2.047l2.785 4.528L9.358 36.053H6.703a1.953 1.953 0 0 0 0 3.905H18.784a28.3 28.3 0 0 0-.417 3.745H2.763A1.953 1.953 0 0 0 .81 45.656C.81 70.024 20.633 89.848 45 89.848c24.367 0 44.19-19.824 44.19-44.192a1.953 1.953 0 0 0-1.953-1.953ZM64.478 28.99a1.943 1.943 0 0 0-1.475-1.001c-.398-.397-.812-.78-1.236-1.149l2.194-3.26.412-.612a1.951 1.951 0 0 0-1.62-3.043h-1.739L70.321 6.1l9.308 13.825h-1.738a1.952 1.952 0 0 0-1.621 3.043l3.358 4.988h-1.737a1.95 1.95 0 0 0-1.621 3.042l3.359 4.989H61.015l3.358-4.989c.229-.341.328-.737.318-1.134-.006-.3-.068-.6-.213-.874Zm-18.349-8.003c3.44 0 6.712.735 9.67 2.05a1.94 1.94 0 0 0 1.548.792h1.739l-.469.695-2.89 4.292a1.954 1.954 0 0 0 1.62 3.043h1.738l-3.358 4.988a1.954 1.954 0 0 0 1.62 3.043h12.138c.211.989.365 1.999.449 3.027H22.325c.082-1.006.232-1.992.436-2.959H50.931a1.952 1.952 0 0 0 0-3.905h-2.656l-8.702-14.147a23.847 23.847 0 0 1 6.556-.919Zm-19.392 15.01 2.079-3.602 2.079 3.602h-4.158Zm-12.794.056 14.873-24.18 4.984 8.103 2.056 3.341 7.833 12.735h-8.251l-4.931-8.54a1.952 1.952 0 0 0-3.381 0l-4.931 8.54H13.943v.001Zm71.296 11.554a40.668 40.668 0 0 1-.152 2.048H43.868v.015a6.534 6.534 0 0 0-4.278 1.847l-.179.146-.063.062a2.973 2.973 0 0 1-2.107.875 2.989 2.989 0 0 1-2.114-.877l-.176-.164a6.561 6.561 0 0 0-4.65-1.903c-1.727 0-3.36.663-4.586 1.858l-.184.148-.063.063a2.977 2.977 0 0 1-4.22-.002l-.052-.049-.116-.105a6.57 6.57 0 0 0-4.66-1.913c-1.73 0-3.361.665-4.602 1.874a.263.263 0 0 0-.039.029 2.985 2.985 0 0 1-4.22 0l-.132.132.083-.178-.112-.105a6.555 6.555 0 0 0-2.457-1.539 41.01 41.01 0 0 1-.179-2.261h80.477v-.001ZM9.402 64.494c.093.004.184.018.277.018 1.729 0 3.36-.666 4.601-1.875a.22.22 0 0 0 .038-.028 2.967 2.967 0 0 1 2.108-.874 3.003 3.003 0 0 1 2.136.896l.028.028.128.118a6.57 6.57 0 0 0 4.646 1.9 6.554 6.554 0 0 0 4.586-1.854l.188-.154.063-.062a2.97 2.97 0 0 1 2.109-.874 2.993 2.993 0 0 1 2.162.924l.129.118a6.568 6.568 0 0 0 4.645 1.9 6.549 6.549 0 0 0 4.588-1.858l.188-.152.06-.059a2.957 2.957 0 0 1 1.91-.854h37.926a40.008 40.008 0 0 1-2.508 4.814H43.754v.053a6.53 6.53 0 0 0-4.164 1.842l-.179.146-.063.062a2.97 2.97 0 0 1-2.107.875 2.989 2.989 0 0 1-2.114-.877l-.176-.164a6.566 6.566 0 0 0-4.65-1.904c-1.727 0-3.36.664-4.586 1.859l-.184.148-.063.063a2.973 2.973 0 0 1-2.107.875 2.99 2.99 0 0 1-2.113-.876l-.052-.05-.116-.105a6.575 6.575 0 0 0-4.66-1.914 6.555 6.555 0 0 0-4.595 1.869 40.239 40.239 0 0 1-2.423-3.974Zm34.779-6.383v-.004c-.03 0-.059.004-.089.004h-.224v.012a6.528 6.528 0 0 0-4.278 1.846l-.179.146-.063.062a2.984 2.984 0 0 1-4.221-.002l-.176-.164a6.566 6.566 0 0 0-4.65-1.903c-1.727 0-3.36.664-4.586 1.858l-.184.147-.063.063a2.985 2.985 0 0 1-4.22-.001 2.21 2.21 0 0 0-.052-.049l-.116-.107a6.577 6.577 0 0 0-4.66-1.912c-1.73 0-3.361.665-4.602 1.874a.368.368 0 0 0-.039.03 2.984 2.984 0 0 1-4.22 0l-.132.131.083-.178-.112-.105c-.042-.041-.087-.076-.129-.115a39.94 39.94 0 0 1-1.501-4.966 6.571 6.571 0 0 0 3.913 1.281c1.729 0 3.36-.665 4.601-1.875.014-.008.027-.019.038-.028a2.972 2.972 0 0 1 2.108-.875 3.008 3.008 0 0 1 2.136.897l.028.028.128.117a6.567 6.567 0 0 0 4.646 1.901 6.55 6.55 0 0 0 4.586-1.854l.188-.154.063-.061a2.975 2.975 0 0 1 2.109-.875 2.998 2.998 0 0 1 2.162.925l.129.117a6.565 6.565 0 0 0 4.645 1.901 6.553 6.553 0 0 0 4.588-1.858l.188-.152.06-.059a2.959 2.959 0 0 1 1.956-.859h40.519a39.855 39.855 0 0 1-1.252 4.814H44.181v.002ZM25.875 81.096a6.511 6.511 0 0 0 2.075-1.354l.188-.155.063-.062a2.97 2.97 0 0 1 2.109-.874 2.994 2.994 0 0 1 2.162.925l.129.117a6.57 6.57 0 0 0 4.645 1.901 6.552 6.552 0 0 0 4.588-1.857l.188-.153.06-.06a2.96 2.96 0 0 1 1.948-.858h24.023A40.046 40.046 0 0 1 45 85.942a40.02 40.02 0 0 1-19.125-4.846Zm46.662-6.071H43.868v.015a6.538 6.538 0 0 0-4.278 1.847l-.179.146-.063.062a2.98 2.98 0 0 1-4.221-.003l-.176-.163a6.566 6.566 0 0 0-4.65-1.903c-1.727 0-3.36.663-4.586 1.857l-.184.149-.063.063a2.981 2.981 0 0 1-4.22-.002s-.051-.047-.052-.05l-.116-.105a6.56 6.56 0 0 0-3.501-1.808 40.618 40.618 0 0 1-3.559-3.768c.087-.077.177-.149.261-.231a.292.292 0 0 0 .038-.029 2.972 2.972 0 0 1 2.108-.875 3.008 3.008 0 0 1 2.164.925l.128.119a6.575 6.575 0 0 0 4.646 1.9 6.554 6.554 0 0 0 4.586-1.854l.188-.155.063-.061a2.975 2.975 0 0 1 2.109-.875 2.995 2.995 0 0 1 2.134.9l.028.025.129.119a6.572 6.572 0 0 0 4.645 1.9 6.55 6.55 0 0 0 4.588-1.859l.188-.152.06-.059a2.972 2.972 0 0 1 2.108-.875v-.016h32.718a40.838 40.838 0 0 1-4.372 4.816Z' fill='%23000'/%3E%3C/svg%3E");
  mask-repeat:  no-repeat;
  mask-position: center center;
  mask-size: 7em;
}

#art {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 10px #ccc, 0 10px 8px -4px black;
  z-index: -9;
  opacity: 0.8;
}
#svgFrame {
  width: 100vw;
  height: 100vh;
  display: block;
}
View Compiled 
document.addEventListener('DOMContentLoaded', function () {
  var selectElement = document.getElementById('activity-select');
  selectElement.style.display = 'none';
  var optionsList = document.createElement('div');
  optionsList.id = 'custom-activity-options';

  // Define color mapping for each option
  const optionColors = {
    hiking: '113, 50%, 20%',
    canoeing: '180, 50%, 20%',
    fishing: '210, 100%, 30%',
    crafts: '30, 50%, 20%',
    archery: '0, 100%, 20%'
  };

  // Function to update the select element and the active state
  function updateSelection(value) {
    selectElement.value = value;
    const hslColor = optionColors[value];
    const hue = hslColor.split(',')[0];



    Array.from(optionsList.children).forEach(child => {
      if (child.getAttribute('data-value') === value) {
        child.classList.add('active');
      } else {
        child.classList.remove('active');
      }
    });

    generateLandscape(hue);
  }

  // Use this function to convert HSL to RGB for CSS variables requiring RGBA manipulation
  function hslToRgb(h, s, l) {
    h /= 360;
    s /= 100;
    l /= 100;
    let r, g, b;

    if (s === 0) {
      r = g = b = l; // achromatic
    } else {
      const hue2rgb = (p, q, t) => {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1 / 6) return p + (q - p) * 6 * t;
        if (t < 1 / 2) return q;
        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
        return p;
      };

      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1 / 3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1 / 3);
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  }

  // Create an option in the custom list for each select option
  Array.from(selectElement.options).forEach(option => {
    if (option.value) { // Skip the placeholder option
      var optionDiv = document.createElement('div');
      optionDiv.textContent = option.text;
      optionDiv.setAttribute('data-value', option.value);
      optionDiv.classList.add('custom-option');
      var iconSpan = document.createElement('span')
      iconSpan.classList.add('icon');
      optionDiv.appendChild(iconSpan)

      optionDiv.addEventListener('click', function () {
        updateSelection(option.value);

        const colorString = optionColors[option.value];
        if (colorString) {
          let [h, s, l] = colorString.split(', ').map(val => {
            return val.includes('%') ? Number(val.replace('%', '')) : Number(val);
          });
          const [r, g, b] = hslToRgb(h, s, l);
          if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
            document.documentElement.style.setProperty('--foreground', `${r}, ${g}, ${b}`);
          } else {
            console.error('Conversion to RGB failed:', { h, s, l });
          }
        } else {
          console.error('No color found for value:', option.value);
        }
      });

      optionsList.appendChild(optionDiv);
    }
  });

  // Insert the custom options list after the select element
  selectElement.parentNode.insertBefore(optionsList, selectElement.nextSibling);
});


function generateLandscape(color) {
  let shade = color || '0, 0%, 100%'; // Default to white if no color provided

  let svg = document.getElementById("svgFrame");
  svg.style.backgroundImage = `linear-gradient(hsl(${shade}), hsl(${shade}))`;

  let moon = document.getElementById("moon");
  gsap.to(moon, { duration: 0.7, morphSVG: randomMoonGen(moon) });
  moon.setAttribute("stroke", `hsl(${shade})`);
  moon.setAttribute("fill", `hsl(${shade})`);

  TERRAIN_HEIGHTS.forEach((base, idx) => {
    let L = document.getElementById(`layer${idx + 1}`);
    gsap.to(L, { duration: 0.7, morphSVG: randomPathGen(base, idx + 1) });
    L.setAttribute("stroke", `hsl(${shade})`);
    L.setAttribute("fill", `hsl(${shade})`);
  });

  TREE_SPACES.forEach((space, idx) => {
    let tree = document.getElementById(`layert${idx + 1}`);
    gsap.to(tree, { duration: 0.7, morphSVG: randomTreeGen(tree, space) });
    tree.setAttribute("d", randomTreeGen(tree, space));
    tree.setAttribute("stroke", `hsl(${shade})`);
    tree.setAttribute("fill", `hsl(${shade})`);
  });
}

// Create the main div element
var artDiv = document.createElement('div');
artDiv.id = 'art';

// Create the SVG element
var svgFrame = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgFrame.id = 'svgFrame';
svgFrame.style.width = "100vw";
svgFrame.style.height = "100vh";

// List of path ids
var paths = ['moon', 'layer4', 'layer3', 'layer2', 'layer1', 'layert1', 'layert2', 'layert3'];

// Create and append path elements to the SVG
paths.forEach(function (pathId) {
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.id = pathId;
  svgFrame.appendChild(path);
});

// Append the SVG to the div
artDiv.appendChild(svgFrame);

// Append the div to the body or a specific element
document.body.appendChild(artDiv);

gsap.registerPlugin(MorphSVGPlugin);

function rand(a, b) {
  return Math.random() * (b - a) + a;
}

const BOX = document.getElementById("art").getBoundingClientRect();

//percentage heights of terrain levels
const TERRAIN_HEIGHTS = [1.4, 0.85, 0.75, 0.6];
//percentage space between trees
const TREE_SPACES = [rand(0.05, 0.5), rand(0.01, 0.2), rand(0.8, 0.9)];

function randomPathGen(base, lvl) {
  let w = BOX.width;
  let h = BOX.height;
  let path = `M 0 ${base * h}`;
  let curve = `c ${w * rand(0, 1)} -${h * rand(0.05, 0.01) * lvl},
                 ${w * rand(0, 1)} ${h * rand(-0.1, 0.1) * lvl},
                 ${w} 0`;
  let closeCurve = `v ${h - base} h -${w} z`;
  return path + curve + closeCurve;
}

function randomTreeGen(layer, xPos) {
  let w = BOX.width;
  let h = BOX.height;
  let path = `M ${xPos * w} ${h}`;
  let treeH = rand(50, 300);
  let treeW = rand(25, 50);
  let curve = `l ${treeW} -${treeH} l ${treeW} ${treeH} z`;
  return path + curve;
}

function randomMoonGen(moon) {
  let w = BOX.width;
  let h = BOX.height;
  let cx = Math.floor(rand(500, 650));
  let cy = Math.floor(rand(30, 100));
  let r = Math.floor(rand(25, 60));
  let path = `M ${cx} ${cy} m -${r} 0`;
  let curve = `a ${r},${r} 0 1,0 ${2 * r},0
               a ${r},${r} 0 1,0 -${2 * r},0 `;
  return path + curve;
}

function generateLandscape(color) {
  let baseHue = color; // Use black hue
  let desaturation = 100; // Adjust desaturation level

  let svg = document.getElementById("svgFrame");
  svg.style.backgroundImage = `linear-gradient(hsl(${baseHue}, ${desaturation}%, 88%), hsl(${baseHue}, ${desaturation}%, 100%))`;

  let moon = document.getElementById("moon");
  moon.setAttribute("d", randomMoonGen(moon));
  moon.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, 97%)`);
  moon.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, 97%)`);

  TERRAIN_HEIGHTS.forEach((base, idx) => {
    let lightness = 10 + idx * 10; // Adjust lightness for different shades
    let L = document.getElementById(`layer${idx + 1}`);
    L.setAttribute("d", randomPathGen(base, idx + 1));
    L.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, ${lightness}%)`);
    L.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, ${lightness}%)`);
  });

  TREE_SPACES.forEach((space, idx) => {
    let tree = document.getElementById(`layert${idx + 1}`);
    let treeLightness = 10 + idx * 10; // Adjust lightness for different shades of trees
    tree.setAttribute("d", randomTreeGen(tree, space));
    tree.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, ${treeLightness}%)`);
    tree.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, ${treeLightness}%)`);
  });
}
function createInitialScape() {
  let baseHue = 0; // Use black hue
  let desaturation = 0; // Adjust desaturation level

  let svg = document.getElementById("svgFrame");
  svg.style.backgroundImage = `linear-gradient(hsl(${baseHue}, ${desaturation}%, 88%), hsl(${baseHue}, ${desaturation}%, 100%))`;

  let moon = document.getElementById("moon");
  moon.setAttribute("d", randomMoonGen(moon));
  moon.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, 97%)`);
  moon.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, 97%)`);

  TERRAIN_HEIGHTS.forEach((base, idx) => {
    let lightness = 10 + idx * 10; // Adjust lightness for different shades
    let L = document.getElementById(`layer${idx + 1}`);
    L.setAttribute("d", randomPathGen(base, idx + 1));
    L.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, ${lightness}%)`);
    L.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, ${lightness}%)`);
  });

  TREE_SPACES.forEach((space, idx) => {
    let tree = document.getElementById(`layert${idx + 1}`);
    let treeLightness = 10 + idx * 10; // Adjust lightness for different shades of trees
    tree.setAttribute("d", randomTreeGen(tree, space));
    tree.setAttribute("stroke", `hsl(${baseHue}, ${desaturation}%, ${treeLightness}%)`);
    tree.setAttribute("fill", `hsl(${baseHue}, ${desaturation}%, ${treeLightness}%)`);
  });
}

createInitialScape();


function createBottomBar() {
  // Create a new div element
  var bar = document.createElement('div');

  // Set the HTML content for the bar, including links
  bar.innerHTML = 'Background landscape by <a href="https://codepen.io/qub3r-001" target="_blank">@qub3r-001</a> · Icons from <a href="https://thenounproject.com/" target="_blank">TheNounProject</a>';

  // Style the bar
  bar.style.position = 'fixed';
  bar.style.bottom = '0';
  bar.style.left = '0';
  bar.style.width = '100%';
  bar.style.backgroundColor = '#333';
  bar.style.color = '#fff';
  bar.style.textAlign = 'center';
  bar.style.padding = '10px';
  bar.style.boxShadow = '0 -2px 5px rgba(0,0,0,0.3)';
  bar.style.fontSize = '14px';

  // Ensure links are styled correctly
  var links = bar.querySelectorAll('a');
  links.forEach(function (link) {
    link.style.color = '#9cf';
    link.style.textDecoration = 'none';
  });

  // Append the bar to the body
  document.body.appendChild(bar);
}

// Call the function to add the bar when the document is loaded
document.addEventListener('DOMContentLoaded', function () {
  createBottomBar();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/16327/MorphSVGPlugin3.min.js
  2. https://unpkg.co/gsap@3/dist/gsap.min.js