<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre-Merge Checklist</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200');

        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        #retrobg {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            color: #a3c;
            background-color: #000;
            z-index: 1;
        }

        #retrobg-sky {
            position: absolute;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            top: 0;
            width: 100%;
            height: 55%;
            background: linear-gradient(#214 75%, #249);
        }

        #retrobg-sunWrap {
            position: relative;
            width: 40%;
            margin-bottom: -15%;
        }

        #retrobg-sun {
            --glow-color: #d44;
            padding-top: 100%;
            border-radius: 50%;
            background-image: linear-gradient(#fcdf11, #ff623f, #fe2085 50%);
            box-shadow: 0 0 160px 80px var(--glow-color);
            animation: 2s ease infinite alternate retrobg-sun-glow-anim;
        }

        @keyframes retrobg-sun-glow-anim {
            from {
                box-shadow: 0 0 160px 80px var(--glow-color);
            }
            to {
                box-shadow: 0 0 200px 95px var(--glow-color);
            }
        }

        #retrobg-stars {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .retrobg-star {
            position: absolute;
            border-radius: 50%;
            width: 2px;
            height: 2px;
            background-color: #fff;
        }

        #retrobg-mountains {
            position: absolute;
            width: 100%;
            height: 30%;
        }

        .retrobg-mountain {
            position: absolute;
            width: 30%;
            height: 100%;
            background-image: linear-gradient(#000 70%, #111 85%, #fff1);
        }

        #retrobg-mountains-left {
            left: 0;
            clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%);
        }

        #retrobg-mountains-right {
            right: 0;
            clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%);
        }

        #retrobg-cityWrap {
            position: absolute;
            width: 50%;
            margin-left: -1%;
        }

        #retrobg-city {
            padding-top: 20%;
        }

        .retrobg-building {
            position: absolute;
            width: 5%;
            height: 100%;
            bottom: 0;
            border-radius: 4px 4px 0 0;
            background-image: linear-gradient(0deg, rgba(17, 17, 34, 0), #112 30px, #000);
        }

        .retrobg-building:nth-child(odd) {
            background-image: linear-gradient(0deg, rgba(24, 24, 42, 0), #223 30px, #000);
        }

        .retrobg-antenna::after {
            content: "";
            position: absolute;
            left: 50%;
            margin-left: calc(-1px - 5%);
            bottom: 100%;
            width: 10%;
            min-width: 2px;
            height: 33%;
            background-color: #000;
        }

        #retrobg-ground {
            position: absolute;
            overflow: hidden;
            width: 100%;
            height: 45%;
            bottom: 0;
            border-top: 2px solid #bf578c;
            background-color: #000;
        }

        #retrobg-groundShadow {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(#000 0%, transparent);
        }

        #retrobg-linesWrap {
            height: 100%;
            perspective: 1000px;
            perspective-origin: center top;
        }

        #retrobg-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-origin: top center;
            animation: .35s linear infinite retrobg-lines-anim;
        }

        @keyframes retrobg-lines-anim {
            from {
                transform: rotateX(84deg) translateY(0);
            }
            to {
                transform: rotateX(84deg) translateY(100px);
            }
        }

        #retrobg-hlines,
        #retrobg-vlines {
            position: absolute;
            left: calc((900% - 100%) / -2);
            width: 900%;
            height: 500%;
        }

        #retrobg-vlines {
            display: flex;
            justify-content: center;
        }

        .retrobg-hline,
        .retrobg-vline {
            width: 100%;
            height: 100%;
            background-color: currentColor;
        }

        .retrobg-hline {
            height: 3px;
        }

        .retrobg-vline {
            width: 3px;
        }

        .retrobg-hline + .retrobg-hline {
            margin-top: 98px;
        }

        .retrobg-vline + .retrobg-vline {
            margin-left: 48px;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .checklist {
            width: 80%;
            max-width: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(75, 75, 250, 0.6);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            z-index: 2;
            backdrop-filter: blur(5px); /* Makes background slightly blurred for readability */
            color: #fff;
        }

        .item {
            margin: 15px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .item span {
            flex-grow: 1;
            text-align: left;
            margin-left: 10px;
        }

        .item label {
            margin: 0 10px;
        }

        .blurred {
            opacity: 0.5;
            pointer-events: none;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 15;
            color: #fff;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .modal-content {
            background: #224422;
            color: #4cff4c;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }

        footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: #fff;
            z-index: 2;
            font-family: 'Source Code Pro', monospace;
        }
    </style>
</head>
<body>
    <div id="retrobg">
        <div id="retrobg-sky">
            <div id="retrobg-stars">
                <div class="retrobg-star" style="left:  5%; top: 55%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left:  7%; top:  5%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 10%; top: 45%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 12%; top: 35%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 15%; top: 39%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 20%; top: 10%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 35%; top: 50%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 40%; top: 16%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 43%; top: 28%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 45%; top: 30%; transform: scale( 3 );"></div>
                <div class="retrobg-star" style="left: 55%; top: 18%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 60%; top: 23%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 62%; top: 44%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 67%; top: 27%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 75%; top: 10%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 80%; top: 25%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 83%; top: 57%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 90%; top: 29%; transform: scale( 2 );"></div>
                <div class="retrobg-star" style="left: 95%; top:  5%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 96%; top: 72%; transform: scale( 1 );"></div>
                <div class="retrobg-star" style="left: 98%; top: 70%; transform: scale( 3 );"></div>
            </div>
            <div id="retrobg-sunWrap">
                <div id="retrobg-sun"></div>
            </div>
            <div id="retrobg-mountains">
                <div id="retrobg-mountains-left" class="retrobg-mountain"></div>
                <div id="retrobg-mountains-right" class="retrobg-mountain"></div>
            </div>
            <div id="retrobg-cityWrap">
                <div id="retrobg-city">
                    <div style="left:  4.0%; height: 20%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left:  6.0%; height: 50%; width: 1.5%;" class="retrobg-building"></div>
                    <div style="left:  8.0%; height: 25%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 12.0%; height: 30%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 13.0%; height: 55%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 17.0%; height: 20%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 18.5%; height: 70%; width: 1.5%;" class="retrobg-building"></div>
                    <div style="left: 20.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 21.5%; height: 80%; width: 2.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 25.0%; height: 60%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 28.0%; height: 40%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 30.0%; height: 70%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 35.0%; height: 65%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 38.0%; height: 40%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 42.0%; height: 60%; width: 2.0%;" class="retrobg-building"></div>
                    <div style="left: 43.0%; height: 85%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 45.0%; height: 40%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 48.0%; height: 25%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 50.0%; height: 80%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 52.0%; height: 32%; width: 5.0%;" class="retrobg-building"></div>
                    <div style="left: 55.0%; height: 55%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 58.0%; height: 45%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 61.0%; height: 90%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 66.0%; height: 99%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 69.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 73.5%; height: 90%; width: 2.0%;" class="retrobg-building"></div>
                    <div style="left: 72.0%; height: 70%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 75.0%; height: 60%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 80.0%; height: 40%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 83.0%; height: 70%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 87.0%; height: 60%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
                    <div style="left: 93.0%; height: 50%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 91.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
                    <div style="left: 94.0%; height: 20%; width: 3.0%;" class="retrobg-building"></div>
                    <div style="left: 98.0%; height: 35%; width: 2.0%;" class="retrobg-building"></div>
                </div>
            </div>
        </div>
        <div id="retrobg-ground">
            <div id="retrobg-linesWrap">
                <div id="retrobg-lines">
                    <div id="retrobg-vlines">
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                        <div class="retrobg-vline"></div>
                    </div>
                    <div id="retrobg-hlines">
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                        <div class="retrobg-hline"></div>
                    </div>
                </div>
            </div>
            <div id="retrobg-groundShadow"></div>
        </div>
    </div>

    <div class="checklist" id="checklist">
        <h1>Pre-Merge Checklist</h1>
        <div class="item">
            <span>1. Are they tagged as AR/AP?</span>
            <label>
                <input type="checkbox" class="answer" data-index="0"> Yes
            </label>
            <label>
                <input type="checkbox" class="answer" data-index="0"> No
            </label>
        </div>
        <div class="item">
            <span>2. Does it have MID# record in the config tab?</span>
            <label>
                <input type="checkbox" class="answer" data-index="1"> Yes
            </label>
            <label>
                <input type="checkbox" class="answer" data-index="1"> No
            </label>
        </div>
        <div class="item">
            <span>3. Does it have POA document in the EDOCS Tab?</span>
            <label>
                <input type="checkbox" class="answer" data-index="2"> Yes
            </label>
            <label>
                <input type="checkbox" class="answer" data-index="2"> No
            </label>
        </div>
        <div class="item">
            <span>4. Does it have active transactions in PowerBi?</span>
            <a href="https://app.powerbi.com/groups/me/apps/5cca2ab9-6bf0-4430-a0b2-1cbe94362e11/rdlreports/3474764c-8500-4b8f-b534-263ff4a13d31?ctid=9180b9a6-a316-4a88-9910-39cb4079ee5f&experience=power-bi" style="color: #ffeb3b;">(check here)</a>
            <label>
                <input type="checkbox" class="answer" data-index="3"> Yes
            </label>
            <label>
                <input type="checkbox" class="answer" data-index="3"> No
            </label>
        </div>
        <div class="item">
            <span>5. Are they from a different country than the main organization?</span>
            <label>
                <input type="checkbox" class="answer" data-index="4"> Yes
            </label>
            <label>
                <input type="checkbox" class="answer" data-index="4"> No
            </label>
        </div>
    </div>
    <div class="modal" id="modal">
        <div class="modal-content" id="modal-content"> 
        </div>
    </div>
    <footer>
        This webpage is created by Ruel Olleta
    </footer>
    <script>
        const items = document.querySelectorAll('.item');
        const modal = document.getElementById('modal');
        const answers = document.querySelectorAll('.answer');

        function checkMergeEligibility() {
            const answered = Array.from(answers).filter(answer => answer.checked);
            const allNo = answered.every(answer => answer.parentNode.textContent.trim() === "No");
            const allAnswered = answered.length === items.length;

            if (allAnswered && allNo) {
                modal.style.display = 'flex';
                document.getElementById('modal-content').innerHTML = `
                    <h2>Success!</h2>
                    <p>The organization is okay to merge into other organizations.</p>
                `;
            } else {
                modal.style.display = 'none';
            }
        }

        answers.forEach(answer => {
            answer.addEventListener('change', () => {
                // Ensure only one option is selected per question
                const siblings = answer.parentElement.parentElement.querySelectorAll('input');
                siblings.forEach(sibling => {
                    if (sibling !== answer) sibling.checked = false;
                    sibling.parentElement.classList.add('blurred');
                });
                answer.parentElement.classList.remove('blurred');
                checkMergeEligibility();
            });
        });

        // Toggle retrobg-shutdown class on sun click
        document.querySelector("#retrobg-sun").onclick = () => {
            document.querySelector("#retrobg").classList.toggle("retrobg-shutdown");
        };
    </script>
</body>
</html>

the logic for all no answers is now working however hte logic for yes answers dont work anymore.

Ill explain the logic I want the page to show that the orgs can be merge into other records when the user answers all no in the questions and I want this to show only when all the answer is no if theres question withouth answers yet dont show yet cause the user might choose yet for the remaining questions. as for the yes logic whenever the user chooses yes to any questions immediately show the warning message that the org cannot be merge into other orgs.

also can you make the hyperlink in click here to open in new tab when clicked