<script lang="typescript">
</script>

<svelte:head>
  <title>!!Sludge Fest 2025!!</title>
  <meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head>

<section>
  <img
    alt="Sludge Fest poster; This time its Brown! August 9th 2025; 2488 County Road G, Grand Marsh, WI 53936 Campground opens 11am CT Shows start 4pm. Gleeplebleepo"
    src="/fest/sludge-25.jpg"
  />
  <hr />
  <div>
    <div>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/08.jpg" alt="SLUDGE lettering on pig fence" />
      </label>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/01.jpg" alt="THIS IS A GOOD SIGN; sign on long" />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/02.jpg"
          alt="MOST PEOPLE DON'T LITTER AT SLUDGE; sign on a tree"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/04.jpg" alt="Merch Tent selling Sludge merch" />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/05.jpg"
          alt="Musicians playing on a stage under some trees"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/07.jpg" alt="Sound Engineer studying a monitor" />
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/06.jpg"
          alt="Allie and Pagel painting a canvas by a mulberry tree"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/17.jpg"
          alt="SLUDGE lettering on a fence light by bonfire light"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/16.jpg"
          alt="Two men laying on the ground enjoying a bonfire"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/14.jpg"
          alt="Band playing on stage at night with lights"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/15.jpg"
          alt="Singer dancing on stage at night with lights"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/18.jpg"
          alt="DJ playing on the stage with lasers shining on him"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/19.jpg"
          alt="Audience watching a band play at night with lights"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/13.jpg"
          alt="Light techs putting lights up on a stage"
        />
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/00.jpg" alt="Musicians on stage" />
      </label>
      <label>
        <input type="checkbox" />
        <img src="/fest/23/09.jpg" alt="Lights and fog in pine alley" />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/10.jpg"
          alt="Lasers and fog with dancers in the pines"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/11.jpg"
          alt="Lasers and fog with dancers in the pines 2"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/12.jpg"
          alt="Lasers and fog with dancers in the pines 3"
        />
      </label>
      <label>
        <input type="checkbox" />
        <img
          src="/fest/23/03.jpg"
          alt="Shot from behind the DJ booth with dancers and lights playing against the canopy"
        />
      </label>
    </div>
  </div>
</section>

<style lang="scss">
  section {
    width: 100%;
    text-align: center;
    padding-top: 2rem;
    text-shadow: 3px 3px 3px var(--primary-9);
    hr {
      background: var(--primary-4);
      border: none;
      height: 0.25rem;
      margin: 2rem 0;
    }
    img {
      width: 100%;
    }
    div {
      display: flex;
      gap: 1rem;
      justify-content: center;
      div {
        flex-direction: column;
        width: 30%;
        align-items: center;
        justify-content: unset;

        // Really cool css image zoom
        input[type="checkbox"] {
          display: none;
        }
        img {
          max-width: 100%;
          transition: transform 0.25s ease;
          cursor: zoom-in;
          border-radius: 5px;
        }
        input[type="checkbox"]:checked ~ img {
          transform: scale(2);
          cursor: zoom-out;
        }
      }
    }
  }

  @media screen and (min-width: 600px) {
    section {
      img {
        width: unset;
      }
    }
  }
</style>
