.sun {
            width: 200px;
            height: 200px;
        }

        .center-circle {
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .rays {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .ray {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            left: 50%;
            transform-origin: 0 0;
        }

        .ray::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 100px solid white;
            transform: translate(-50%, -100%);
        }

        .ray:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
        .ray:nth-child(2) { transform: translate(-50%, -50%) rotate(11.25deg); }
        .ray:nth-child(3) { transform: translate(-50%, -50%) rotate(22.5deg); }
        .ray:nth-child(4) { transform: translate(-50%, -50%) rotate(33.75deg); }
        .ray:nth-child(5) { transform: translate(-50%, -50%) rotate(45deg); }
        .ray:nth-child(6) { transform: translate(-50%, -50%) rotate(56.25deg); }
        .ray:nth-child(7) { transform: translate(-50%, -50%) rotate(67.5deg); }
        .ray:nth-child(8) { transform: translate(-50%, -50%) rotate(78.75deg); }
        .ray:nth-child(9) { transform: translate(-50%, -50%) rotate(90deg); }
        .ray:nth-child(10) { transform: translate(-50%, -50%) rotate(101.25deg); }
        .ray:nth-child(11) { transform: translate(-50%, -50%) rotate(112.5deg); }
        .ray:nth-child(12) { transform: translate(-50%, -50%) rotate(123.75deg); }
        .ray:nth-child(13) { transform: translate(-50%, -50%) rotate(135deg); }
        .ray:nth-child(14) { transform: translate(-50%, -50%) rotate(146.25deg); }
        .ray:nth-child(15) { transform: translate(-50%, -50%) rotate(157.5deg); }
        .ray:nth-child(16) { transform: translate(-50%, -50%) rotate(168.75deg); }
        .ray:nth-child(17) { transform: translate(-50%, -50%) rotate(180deg); }
        .ray:nth-child(18) { transform: translate(-50%, -50%) rotate(191.25deg); }
        .ray:nth-child(19) { transform: translate(-50%, -50%) rotate(202.5deg); }
        .ray:nth-child(20) { transform: translate(-50%, -50%) rotate(213.75deg); }
        .ray:nth-child(21) { transform: translate(-50%, -50%) rotate(225deg); }
        .ray:nth-child(22) { transform: translate(-50%, -50%) rotate(236.25deg); }
        .ray:nth-child(23) { transform: translate(-50%, -50%) rotate(247.5deg); }
        .ray:nth-child(24) { transform: translate(-50%, -50%) rotate(258.75deg); }
        .ray:nth-child(25) { transform: translate(-50%, -50%) rotate(270deg); }
        .ray:nth-child(26) { transform: translate(-50%, -50%) rotate(281.25deg); }
        .ray:nth-child(27) { transform: translate(-50%, -50%) rotate(292.5deg); }
        .ray:nth-child(28) { transform: translate(-50%, -50%) rotate(303.75deg); }
        .ray:nth-child(29) { transform: translate(-50%, -50%) rotate(315deg); }
        .ray:nth-child(30) { transform: translate(-50%, -50%) rotate(326.25deg); }
        .ray:nth-child(31) { transform: translate(-50%, -50%) rotate(337.5deg); }
        .ray:nth-child(32) { transform: translate(-50%, -50%) rotate(348.75deg); }

        /* Optional: Add rotation animation */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .sun:hover .rays {
            animation: rotate 20s linear infinite;
        }