<script lang="typescript">
	let photos = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19"]
</script>

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

<section>
  <h1>August 9 2025</h1>
  <h2>This time its brown</h2>
  <h2>At Sludge Farm</h2>
  <p>Come out and enjoy live music and fun times</p>
  <p>If you'd like to perform fill out this <a href="https://forms.gle/CNUuN6guAWnUVqw19"> Artist Application </a></p>
  <hr>
  <div>
    <div>
      <label>
        <input type="checkbox">
        <img src="/fest/23/08.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/01.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/02.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/04.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/05.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/07.jpg">
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        <img src="/fest/23/06.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/17.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/16.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/14.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/15.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/18.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/19.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/13.jpg">
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        <img src="/fest/23/00.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/09.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/10.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/11.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/12.jpg">
      </label>
      <label>
        <input type="checkbox">
        <img src="/fest/23/03.jpg">
      </label>
    </div>
  </div>

</section>

<style lang="scss">
  @use '/src/app.scss' as *;
  @use 'sass:color';

	:global(body){
    background-color: $brown;
  }

  section{
    width: 100%;
    text-align: center;
    padding-top: 2rem;
    text-shadow: 3px 3px 3px $green;
    h1{
      font-size: 3rem;
      font-weight: 600;
    }
    h2{
      font-size: 2rem;
    }
    hr{
      background: color.complement($brown, oklch);
      border: none;
      height: 0.25rem;
      margin: 2rem 0;
    }
    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
        }
      }
    }
  }
</style>