changed title font and added orbit rings to each planet on main menu

src/components/InfoCard/InfoCard.css

@@ -21,6 +21,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  font-family: 'SpaceFont';
 }
 
 .infocard-back-button {

src/components/Navigation/Navbar.css

@@ -32,6 +32,7 @@
   margin-right: 50px;
   transition: 200ms all ease-out;
   animation: 2s navbar-slide linear;
+  font-family: 'SpaceFont';
 }
 
 .planet-selector:hover {

src/components/SolarSystem/SolarSystem.css

@@ -10,8 +10,8 @@
 .mercury-orbit, .venus-orbit, .earth-orbit, .mars-orbit, 
 .jupiter-orbit, .saturn-orbit, .uranus-orbit, .neptune-orbit {
   border-radius: 50%;
-  border: 1px solid rgb(212, 205, 205);
   position: absolute;
+  outline: 1px solid whitesmoke;
 }
 
 .tiny-mercury, .tiny-venus, .tiny-earth, .tiny-mars,
@@ -26,13 +26,14 @@
   border-radius: 50%;
   background-color: rgb(232, 232, 0);
   box-shadow: -4px 2px 58px rgba(247, 212, 123, 0.7);
-  z-index: 2;
+  z-index: 0;
 }
 
 .mercury-orbit {
   width: 9vh;
   height: 9vh;
   animation: orbit 880ms infinite linear;
+  outline-offset: -5px;
 }
 
 .tiny-mercury {
@@ -46,46 +47,50 @@
   width: 15vh;
   height: 15vh;
   animation: orbit 2240ms infinite linear;
+  outline-offset: -1vh;
   position: absolute;
 }
 
 .tiny-venus {
   background: green;
   width: 2vh;
   height: 2vh;
-  top: 50%;
+  left: 50%;
 }
 
 .earth-orbit {
   width: 22vh;
   height: 22vh;
   animation: orbit 3650ms infinite linear;
+  outline-offset: -1vh;
 }
 
 .tiny-earth {
   background: blue;
   width: 2vh;
   height: 2vh;
-  top: 50%;
+  bottom: 50%;
 }
 
 .mars-orbit {
   width: 30vh;
   height: 30vh;
   animation: orbit 6780ms infinite linear;
+  outline-offset: -1vh;
 }
 
 .tiny-mars {
   background: red;
   width: 2vh;
   height: 2vh;
-  top: 50%;
+  right: 50%;
 }
 
 .jupiter-orbit {
   width: 45vh;
   height: 45vh;
   animation: orbit 43310ms infinite linear;
+  outline-offset: -2.5vh;
 }
 
 .tiny-jupiter {
@@ -99,45 +104,46 @@
   width: 65vh;
   height: 65vh;
   animation: orbit 107470ms infinite linear;
+  outline-offset: -2.25vh;
 }
 
 .tiny-saturn {
   background: rgb(104, 98, 83);
   width: 4.5vh;
   height: 4.5vh;
-  top: 50%;
+  right: 50%;
 }
 
 .uranus-orbit {
   width: 80vh;
   height: 80vh;
   animation: orbit 305890ms infinite linear;
+  outline-offset: -2.1vh;
 }
 
 .tiny-uranus {
   width: 4.2vh;
   height: 4.2vh;
   background:rgb(16, 124, 145);
-  top: 50%;
+  bottom: 50%;
 }
 
 
 .neptune-orbit {
   height: 95vh;
   width: 95vh;
   animation: orbit 598000ms infinite linear;
+  outline-offset: -2vh;
 }
 
 .tiny-neptune {
   width: 4vh;
   height: 4vh;
   background: blue;
   border-radius: 50%;
-  top: 50%;
+  right: 50%;
 }
 
-
-
 @keyframes orbit {
   0% { transform: rotate(0deg) }
   100% { transform: rotate(360deg) }

src/components/SolarSystem/index.js

@@ -40,7 +40,6 @@ const SolarSystem = () => {
 
       </div>
   )
-
 }
 
 export default SolarSystem

src/components/Viewport/Viewport.css

@@ -1,6 +1,6 @@
 .main-page-container {
   position: absolute;
-  width: 85%;
+  width: 100%;
   height: 100vh;
   top: 0;
   right: 0;
@@ -15,13 +15,18 @@
   100% { background-position: -100% 0;}
 }
 
-
-
 .title {
   color: #e8ab8c;
   font-size: 48px;
   text-align: center;
   animation: fadeIn 3s;
+  z-index: 2;
+  font-family: 'SpaceFont';
+}
+
+@font-face {
+  font-family: 'SpaceFont';
+  src: url('../../../public/MandatoryPlaything-nRRd0.ttf')
 }
 
 @keyframes fadeIn{
@@ -38,6 +43,7 @@
   font-size: 12px;
   text-align: center;
   animation: fadeIn 5s;
+  z-index: 2;
 }
 
 .github-link {

src/components/Viewport/index.js

@@ -5,7 +5,7 @@ const Viewport = () => {
 
   return (
     <div className="main-page-container">
-      <div className="title">Solarium v0.7</div>
+      <div className="title">Solarium v0.8</div>
       <div className="creator">Made by
         <a className="github-link" href="https://christograb.github.io" target="_blank" rel="noreferrer">Christo Grabowski</a>
       </div>