diff --git a/css/style.css b/css/style.css
index 8d639f9..aab17b9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,125 +3,102 @@
     font-family: Verdana;
   }
   body {
-    background-color: black;
+    background-color: #111;
   }
-  a {
-    color: white;
-  }
-  #container {
-    width: 50%;
-    margin-left: 25%;
-    margin-top: 10%;
-  }
-  #links {
-    line-height: 1.75rem;
-    color: white;
-    text-align: center;
-    padding-top: 4rem;
-    padding-bottom: 1rem;
-  }
-  .link {
-    width: 50%;
-    padding: .25rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    margin-right: auto;
-    transition: 0.2s;
-  }
-  .app-link {
-    width: 80%;
-    padding: .25rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    margin-right: auto;
-    transition: 0.2s;
-  }
-  .link a {
+
+  a { 
+    color: inherit; 
     text-decoration: none;
-    font-family: Verdana;
   }
-  .app-link a {
-    font-family: sans;
+
+  a:hover {
+    text-shadow: 0px 0px 2px #fff;
   }
-  .link:hover {
-    border-left-color: grey;
-    border-left-style: solid;
-    border-left-width: 2px;
-    border-right-color: grey;
-    border-right-style: solid;
-    border-right-width: 2px;
+  
+  #container {
+    width: 270px;
+    margin-left: calc(50% - 135px);  /* Half the page minus half the width */
+    margin-top: 20%;
   }
-  .app-link .subtitle {
-    font-style: italic;
-    font-size: .9rem;
-    margin-top: .5rem;
+  
+  .rotate-clock {
+    -webkit-animation:spin-clock 7s linear infinite;
+    -moz-animation:spin-clock 7s linear infinite;
+    animation:spin-clock 7s linear infinite;
   }
+  .rotate-anticlock {
+    -webkit-animation:spin-anticlock 5s linear infinite;
+    -moz-animation:spin-anticlock 5s linear infinite;
+    animation:spin-anticlock 5s linear infinite;
+  }
+  @-moz-keyframes spin-clock { 100% { -moz-transform: rotate(360deg); } }
+  @-webkit-keyframes spin-clock { 100% { -webkit-transform: rotate(360deg); } }
+  @keyframes spin-clock { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+  @-moz-keyframes spin-anticlock { 100% { -moz-transform: rotate(-360deg); } }
+  @-webkit-keyframes spin-anticlock { 100% { -webkit-transform: rotate(-360deg); } }
+  @keyframes spin-anticlock { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
+
   #logo {
     width: 80px;
-    position: relative;
-    top: 150px;
-    left: 50%;
-    margin-left: -40px;
+    position: absolute;
+    margin: 95px;
   }
-  .rotate {
-    -webkit-animation:spin 7s linear infinite;
-    -moz-animation:spin 7s linear infinite;
-    animation:spin 7s linear infinite;
-  }
-  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-  .arc-outside {
-    margin: auto;
-    position: relative;
-    width:210px;
-    height:210px;
+  .arc {
+    position: absolute;
     border-radius: 50%;
-    border-top:5px solid black;
-    border-right:5px solid white;
-    border-left:5px solid black;
-    border-bottom:5px solid black;
+    border-color: rgba(0,0,0,0);
+    border-width: 5px;
+    border-style: solid;
+  }
+
+  .arc-0 {
+    width:250px;  /* Gap between arcs is 20px */
+    height:250px;
+    border-right-color: white;
+    /* border-left-color: white; */
+    margin: 5px;  /* Margin is equal to half of the difference between the arc's diameter and the container width */
   }
   .arc-1 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -95px 0 0 -95px;
-    width:180px;
-    height:180px;
-    border-radius:50%;
-    border-top:5px solid black;
-    border-right:5px solid black;
-    border-left:5px solid black;
-    border-bottom:5px solid white;
+    width:230px;
+    height:230px;
+    border-left-color: white;
+    /* border-right-color: white; */
+    margin: 15px;
   }
   .arc-2 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -80px 0 0 -80px;
-    width:150px;
-    height:150px;
-    border-radius:50%;
-    border-top:5px solid black;
-    border-right:5px solid black;
-    border-left:5px solid white;
-    border-bottom:5px solid black;
+    width:210px;
+    height:210px;
+    border-left-color: white;
+    /* border-right-color: white; */
+    margin: 25px;
   }
   .arc-3 {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    margin: -65px 0 0 -65px;
-    width:120px;
-    height:120px;
-    border-radius:50%;
-    border-top:5px solid white;
-    border-right:5px solid black;
-    border-left:5px solid black;
-    border-bottom:5px solid black;
+    width:190px;
+    height:190px;
+    border-right-color: white;
+    /* border-left-color: white; */
+    margin: 35px;
+  }
+  .arc-4 {
+    width:170px;
+    height:170px;
+    border-top-color: white;
+    /* border-bottom-color: white; */
+    margin: 45px;
+  }
+  .arc-5 {
+    width:150px;
+    height:150px;
+    border-top-color: white;
+    /* border-bottom-color: white; */
+    margin: 55px;
+  }
+  .arc-6 {
+    width:130px;
+    height:130px;
+    border-bottom-color: white;
+    /* border-top-color: white; */
+    margin: 65px;
   }
 footer {
   color: grey;
@@ -133,4 +110,5 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
diff --git a/index.html b/index.html
index aa85d18..73ca1bc 100644
--- a/index.html
+++ b/index.html
@@ -19,24 +19,20 @@
   <body>
     <div id="container">
       <img id="logo" src="https://cdn.enp.one/img/logos/e-w-sm.png"/>
-      <div class="arc-outside rotate">
-        <div class="arc-1 rotate">
-          <div class="arc-2 rotate">
-            <div class="arc-3 rotate">
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="links">
-        <div class="link">
-          <a href="https://enpaul.net/">about</a>
-        </div>
-      </div>
+      <div class="arc arc-shadow arc-0 rotate-clock"></div>
+      <div class="arc arc-0 rotate-clock"></div>
+      <div class="arc arc-1 rotate-anticlock"></div>
+      <div class="arc arc-2 rotate-clock"></div>
+      <div class="arc arc-3 rotate-anticlock"></div>
+      <div class="arc arc-4 rotate-clock"></div>
+      <div class="arc arc-5 rotate-anticlock"></div>
+      <div class="arc arc-6 rotate-clock"></div>
+      <div class="arc arc-7 rotate-anticlock"></div>
     </div>
   </body>
 
   <footer>
-    &copy;2023 E.N.Paul<br>
+    &copy;2023 <a href="https://enpaul.net/">enpaul</a>&nbsp;-&nbsp;
     <a href="https://vcs.enp.one/skylab/enp.one/">source</a>
   </footer>
 </html>