document.addEventListener("DOMContentLoaded", function() {

            const astroCircle = document.getElementById("astroCircle");

            const labels = [
                "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
            ];

            const circleSize = astroCircle.offsetWidth;
            const centerX = circleSize / 2;
            const centerY = circleSize / 2;

            const radius = circleSize / 2;

            // numbers will be placed OUTSIDE the circle
            const numberRadius = radius + 25;

            for (let i = 0; i < 12; i++) {

                const angleDeg = i * 30;
                const angleRad = (angleDeg - 90) * Math.PI / 180;

                // draw segment divider
                const line = document.createElement("div");
                line.classList.add("segment-line");
                line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
                astroCircle.appendChild(line);

                // place number in center of segment
                const midAngle = angleDeg + 15;
                const midRad = (midAngle - 90) * Math.PI / 180;

                const x = centerX + numberRadius * Math.cos(midRad);
                const y = centerY + numberRadius * Math.sin(midRad);

                const number = document.createElement("div");
                number.classList.add("segment-number");
                number.innerText = labels[i];

                number.style.left = `${x}px`;
                number.style.top = `${y}px`;

                astroCircle.appendChild(number);

            }

        });