Merge pull request #801 from jenyyy4/master

made the earth look more like a sphere

Author: aayush105

3D Earth/index.html

@@ -20,8 +20,6 @@
             width: 300px;
             height: 300px;
             position: relative;
-            transform-style: preserve-3d;
-            animation: rotate 20s linear infinite;
         }
 
         .globe {
@@ -31,37 +29,26 @@
             position: absolute;
             transform-style: preserve-3d;
             background: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg');
-            background-size: cover;
-            overflow: hidden;
-        }
-
-        .globe::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 70%);
-            animation: dayNightCycle 20s linear infinite;
+            background-size: 200% 150%;
+            animation: spin 20s linear infinite;
+            box-shadow:
+                inset 30px 0 80px rgba(0, 0, 0, 0.8),
+                inset -30px 0 40px rgba(255, 255, 255, 0.2),
+                0 0 40px rgba(168, 219, 255, 0.4);
         }
 
         .globe::after {
-            content: '';
+            content: "";
             position: absolute;
-            width: 100%;
-            height: 100%;
+            inset: 0;
             border-radius: 50%;
-            background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1), rgba(0,0,0,0.6));
+            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(0,0,0,0.7) 70%);
             mix-blend-mode: overlay;
-            opacity: 0.5;
-            animation: shadowMovement 20s linear infinite;
         }
 
-        @keyframes rotate {
-            0% { transform: rotateY(0deg); }
-            100% { transform: rotateY(360deg); }
+        @keyframes spin {
+            0% { background-position: 0 0; }
+            100% { background-position: -200% 0; }
         }
 
         @keyframes dayNightCycle {