<!-- <article></article> -->

<article>

  <div id="letterA" class="letter">A</div>
  <div id="letterB" class="letter">B</div>
  <div id="letterC" class="letter">C</div>
  <div id="letterD" class="letter">D</div>
  <div id="letterE" class="letter">E</div>
  <div id="letterF" class="letter">F</div>
  <div id="letterG" class="letter">G</div>
  <div id="letterH" class="letter">H</div>
  <div id="letterI" class="letter">I</div>
  <div id="letterJ" class="letter">J</div>
  <div id="letterK" class="letter">K</div>
  <div id="letterL" class="letter">L</div>
  <div id="letterM" class="letter">M</div>
  <div id="letterN" class="letter">N</div>
  <div id="letter0" class="letter">O</div>
  <div id="letterP" class="letter">P</div>
  <div id="letterQ" class="letter">Q</div>
  <div id="letterR" class="letter">R</div>
  <div id="letterS" class="letter">S</div>
  <div id="letterT" class="letter">T</div>
  <div id="letterU" class="letter">U</div>
  <div id="letterV" class="letter">V</div>
  <div id="letterW" class="letter">W</div>
  <div id="letterX" class="letter">X</div>
  <div id="letterY" class="letter">Y</div>
  <div id="letterZ" class="letter">Z</div>

  <div id="letterA2" class="letter">A</div>
  <div id="letterB2" class="letter">B</div>
  <div id="letterC2" class="letter">C</div>
  <div id="letterD2" class="letter">D</div>
  <div id="letterE2" class="letter">E</div>
  <div id="letterF2" class="letter">F</div>
  <div id="letterG2" class="letter">G</div>
  <div id="letterH2" class="letter">H</div>
  <div id="letterI2" class="letter">I</div>
  <div id="letterJ2" class="letter">J</div>
  <div id="letterK2" class="letter">K</div>
  <div id="letterL2" class="letter">L</div>
  <div id="letterM2" class="letter">M</div>
  <div id="letterN2" class="letter">N</div>
  <div id="letter02" class="letter">O</div>
  <div id="letterP2" class="letter">P</div>
  <div id="letterQ2" class="letter">Q</div>
  <div id="letterR2" class="letter">R</div>
  <div id="letterS2" class="letter">S</div>
  <div id="letterT2" class="letter">T</div>
  <div id="letterU2" class="letter">U</div>
  <div id="letterV2" class="letter">V</div>
  <div id="letterW2" class="letter">W</div>
  <div id="letterX2" class="letter">X</div>
  <div id="letterY2" class="letter">Y</div>
  <div id="letterZ2" class="letter">Z</div>

</article>

<!-- <section></section> -->

<section>
  <div class="container">
    <div class="shape"></div>
  </div>
</section>

body {
  padding: 0px;
  margin: 0px;
  overflow: hidden;

  /* background-color: #95D58D; */
}

article {
  mix-blend-mode: difference;
}

body {
  transition: background-color 1s ease;
}

.square,
.round {
  transition: background-color 1s ease;
}

/* article  */

article {
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 3;

  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
  scroll-snap-type: y mandatory;
}

article .letter {
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;

  scroll-snap-align: start;
}

article .letter:nth-child(even) {
  background-color: rgb(0, 0, 0);
  color: white;
}
article .letter:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}

.letter {
  font-family: "Courier New", Courier, monospace;
  font-size: 300px;
}

/* section  */

section {
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 2;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.shape {
  width: 300px;
  height: 300px;
  background-color: #c9a8f4;
  transition: background-color 1s ease, border-radius 1s ease;
}

.shape.round {
  border-radius: 50%;
}

document.addEventListener('DOMContentLoaded', () => {
    const article = document.querySelector('article');
    const sections = document.querySelectorAll('article .letter');
    const colors = ["#95D58D", "#C9A8F4", "#FFF8A3", "#8CA2F5", "#FF8A8A"];
    const shape = document.querySelector('.shape');
    const body = document.body;

    const changeBackgroundColorAndShape = () => {
        sections.forEach((section, index) => {
            const rect = section.getBoundingClientRect();
            if (rect.top >= 0 && rect.top < window.innerHeight / 2) {
                const bodyColor = colors[index % colors.length];
                const shapeColor = colors[(index + 1) % colors.length]; // Ensure different color for shape

                body.style.backgroundColor = bodyColor;
                shape.style.backgroundColor = shapeColor;

                if (index % 2 === 0) {
                    shape.classList.remove('round');
                } else {
                    shape.classList.add('round');
                }
            }
        });
    };

    const handleInfiniteScroll = () => {
        if (article.scrollTop === 0) {
            article.scrollTop = article.scrollHeight / 2;
        } else if (article.scrollTop + article.clientHeight >= article.scrollHeight) {
            article.scrollTop = article.scrollHeight / 2 - article.clientHeight;
        }
    };

    article.addEventListener('scroll', () => {
        changeBackgroundColorAndShape();
        handleInfiniteScroll();
    });

    // Initial setup
    article.scrollTop = article.scrollHeight / 2;
    changeBackgroundColorAndShape();
});