added shadows to half the planets in size view

src/components/InfoCard/InfoCard.css

@@ -9,7 +9,7 @@
   z-index: 10;
   border-radius: 10px;
   box-shadow: 1px 1px 10px #e8ab8c inset;
-  animation: fadeIn 2s;
+  animation: fadeIn 2s linear;
   display: flex;
   flex-direction: column;
   padding: 20px;

src/components/SolarSystem/Distance.css

@@ -13,6 +13,7 @@
   z-index: 20;
   justify-self: flex-end;
   border-radius: 50%;
+  transition: all 200ms;
 }
 
 .distance-mercury::before {

src/components/SolarSystem/Size.css

@@ -35,6 +35,8 @@
   height: calc(6051.8vw / 4000);
   width: calc(6051.8vw / 4000);
   background: var(--venus-background);
+  transform: rotate(220deg);
+  box-shadow: inset 2px -2px 5px 2px black;
 }
 
 .earth-size {
@@ -43,34 +45,41 @@
   background-image: var(--earth-background);
   background-size: 150%;
   background-position: 50% 20%;
+  box-shadow: inset -1px 1px 5px 2px black;
 }
 
 .mars-size {
   height: calc(3389.5vw / 4000);
   width: calc(3389.5vw / 4000);
   background: var(--mars-background);
+  transform: rotate(220deg);
+  box-shadow: inset 1px 1px 5px black;
 }
 
 .jupiter-size {
   height: calc(69911vw / 4000);
   width: calc(69911vw / 4000);
   background: var(--jupiter-background);
+  box-shadow: inset -10px 1px 20px 10px black;
 }
 
 .saturn-size {
   height: calc(58232vw / 4000);
   width: calc(58232vw / 4000);
   background: var(--saturn-background);
+  transform: rotate(225deg)
 }
 
 .uranus-size {
   height: calc(25362vw / 4000);
   width: calc(25362vw / 4000);
   background: var(--uranus-background);
+  transform: rotate(225deg)
 }
 
 .neptune-size {
   height: calc(24622vw / 4000);
   width: calc(24622vw / 4000);
   background: var(--neptune-background);
+  transform: rotate(225deg)
 }

src/components/Viewport/Viewport.css

@@ -35,7 +35,7 @@
 
 @keyframes fadeIn{
   0% {
-    opacity: 0.1;
+    opacity: 0;
   }
   100% {
     opacity: 1;