<article>
            <h1 class="difference">Random Color Palettes</h1>
            <p class="difference">Infinite color palettes with JS!</p>
            <section class="Palette_Box">

                <!-- Sample color pair box JS will create them from CSV file. -->
                <!-- <div class="palette">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                    <div class="four"></div>
                    <div class="five"></div>
                </div> -->

            </section>
            <button class="more difference">Load more</button>
        </article>

body {
background-color: #D2F5D6;
color: white;
font-family: Arial;
padding: 0px;
margin: 0px;
text-align: center;
font-size: 20px;

padding: 20px;
}


.difference {
  mix-blend-mode: difference;
}


/* pair style  */

/* .Pair_Box {
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* .palette {
    border: 3px solid black;
    border-radius: 20px;
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;

    margin: 10px;
    display: inline-block;
}
.one, .two, .three, .four, .five {
    height: 100%;
    width: 50%;
    position: absolute;
}
.one {
    background-color: black;
    left: 0px;
}
.two {
    background-color: white;
    left: 40px;
}
.three {
    background-color: black;
    left: 80px;
}
.four {
    background-color: white;
    left: 120px;
}
.five {
    background-color: black;
    left: 160px;
} */

.palette {
    border: 3px solid black;
    border-radius: 20px;
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: 10px;
    display: inline-block;
}

.color {
    height: 100%;
    width: 20%; /* Adjust width to evenly distribute the colors */
    position: absolute;
}

/* Example color styling */
.color:nth-child(1) {
    background-color: black;
    left: 0;
}

.color:nth-child(2) {
    background-color: white;
    left: 20%;
}

.color:nth-child(3) {
    background-color: black;
    left: 40%;
}

.color:nth-child(4) {
    background-color: white;
    left: 60%;
}

.color:nth-child(5) {
    background-color: black;
    left: 80%;
}


.more {
    background-color: white;
    border: 0px;
    padding: 5px;
    font-family: Arial;
}
.more:hover {
    background-color: rgb(106, 106, 106);
}

// Function to generate a random hex color
function getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

// Function to generate a random 5-color palette
function generateRandomPalette() {
    const palette = [];
    for (let i = 0; i < 5; i++) {
        palette.push(getRandomColor());
    }
    return palette;
}

// Function to create palette div
function createPaletteDiv(colors) {
    const paletteDiv = document.createElement('div');
    paletteDiv.classList.add('palette');

    for (let i = 0; i < 5; i++) {
        const colorDiv = document.createElement('div');
        colorDiv.classList.add('color');
        colorDiv.style.backgroundColor = colors[i];
        paletteDiv.appendChild(colorDiv);
    }

    return paletteDiv;
}

// Function to load palettes
function loadPalettes(numPalettes) {
    const paletteBox = document.querySelector('.Palette_Box');
    paletteBox.innerHTML = ''; // Clear previous palettes

    for (let i = 0; i < numPalettes; i++) {
        const colors = generateRandomPalette();
        const paletteDiv = createPaletteDiv(colors);
        paletteBox.appendChild(paletteDiv);
    }
}

// Load initial palettes on page load
document.addEventListener('DOMContentLoaded', function() {
    loadPalettes(12);
});

// Attach click event listener to "Load more" button
const loadMoreButton = document.querySelector('.more');
loadMoreButton.addEventListener('click', function() {
    loadPalettes(12);
});