, 255, 255, 0.5);
            border-radius: 10px;
            padding: 5px 10px;
            color: black;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <canvas id="solarSystem"></canvas>
    <div id="counter">FPS: 0 | AVG FPS: 0 | Earth Day: 0</div>
    <script>
        // Define celestial bodies with their properties
        const celestialBodies = [
            {
                name: 'Sun',
                color: ['#f2831f', '#f15d22