From 31a8747b7e3f029dce287de05accd301fa00d7ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Mon, 31 May 2021 21:27:04 +0200
Subject: [PATCH] Better

---
 index.html | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index d016881..e98a38a 100644
--- a/index.html
+++ b/index.html
@@ -116,13 +116,14 @@
       text-align: center;
       font-weight: 900;
       font-size: 8rem;
+      padding: 0 200vw;
       text-shadow: 5px 0px 0px white;
       transition: text-shadow 0.1s ease;
       white-space: nowrap;
     }
 
     .ps-page--link:hover {
-      text-shadow: 5px 0px 0px #00ffab;
+      text-shadow: 10px 0px 0px var(--accent);
     }
 
     .ps-background {
@@ -170,19 +171,23 @@
     }
 
     .ps-logo--base {
-      animation-duration: 30s;
-      animation-name: appear;
+      animation-name: rotate;
+      animation-duration: 0.3s;
       animation-timing-function: linear;
+      animation-play-state: paused;
       animation-iteration-count: infinite;
     }
 
-    .ps-logo:nth-child(2n) .ps-logo--base { animation-delay: -2.5s; }
-    .ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -5s; }
-    .ps-logo:nth-child(5n) .ps-logo--base { animation-delay: -7.5s; }
-    .ps-logo:nth-child(7n) .ps-logo--base { animation-delay: -10s; }
-    .ps-logo:nth-child(11n) .ps-logo--base { animation-delay: -12.5s; }
-    .ps-logo:nth-child(13n) .ps-logo--base { animation-delay: -15s; }
-    .ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -17.5s; }
+    .ps-logo--base:hover {
+      animation-play-state: running;
+    }
+
+    .ps-logo:nth-child(2n) .ps-logo--base { animation-delay: -0.1s; }
+    .ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -0.3s; }
+    .ps-logo:nth-child(5n) .ps-logo--base { animation-delay: -0.5s; }
+    .ps-logo:nth-child(7n) .ps-logo--base { animation-delay: -7s; }
+    .ps-logo:nth-child(11n) .ps-logo--base { animation-delay: -0.9s; }
+    .ps-logo:nth-child(13n) .ps-logo--base { animation-delay: -1s; }
 
     .ps-logo--base::before {
       position: absolute;
@@ -193,7 +198,7 @@
       border-radius: 50%;
     }
 
-    @keyframes appear {
+    @keyframes rotate {
       0% {
         transform: rotate(0deg);
       }