made blob colors and gradients truly dynamic/random

1 files changed, 32 insertions, 20 deletions

diff --git a/src/css/style.css b/src/css/style.css
index e4d813c2..e65debe5 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3,6 +3,11 @@
     --neon-bg-color: #05010d
 }
 
+html {
+    /* hanging-punctuation: first last; */
+    color-scheme: dark;
+}
+
 @font-face {
     font-family: hacked;
     src: url(/fonts/Hacked-KerX.ttf);
@@ -181,6 +186,19 @@ body::-webkit-scrollbar {
     }
 }
 
+@keyframes rotate {
+    from {
+        rotate: 0deg;
+    }
+    
+    50% {
+        scale: 1 1.25;
+    }
+    
+    to {
+        rotate: 360deg;
+    }
+}
 
 
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
@@ -292,6 +310,13 @@ body::-webkit-scrollbar {
     transition: all 0.3s; 
 } */
 
+@media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+        scroll-padding-top: var(--topBarHeight);
+    }
+}
+
 
 .js-tilt-glare {
     border-radius: 18px;
@@ -307,7 +332,7 @@ header {
     width: 100%;
     height: 3em;
     justify-content: space-between;
-    align-items:center;
+    align-items: center;
     /* background: color(0, 0, 0, .1); */
     z-index: 1000;
     background: rgba(0, 0, 0, 0.2);
@@ -438,6 +463,11 @@ a:hover {
     /* color: #F4E8C1; */
 }
 
+.sep {
+    width: 5vh;
+    height: 5vh;
+}
+
 .blob {
     min-height: 75%;
     min-width: 75%;
@@ -460,24 +490,6 @@ a:hover {
     animation-fill-mode: forwards;
 }
 
-@keyframes rotate {
-    from {
-        rotate: 0deg;
-    }
-    
-    50% {
-        scale: 1 1.25;
-    }
-    
-    to {
-        rotate: 360deg;
-    }
-}
-
-.sep {
-    width: 5vh;
-    height: 5vh;
-}
 
 .sblob {
     background-color: white;
@@ -495,4 +507,4 @@ a:hover {
     filter: blur(7vmax);
     -webkit-filter: blur(7vmax);
     z-index: -1;
-}
+}
\ No newline at end of file