implement prefers-reduced-motion css

style.css

@@ -7,7 +7,7 @@ body {
     -moz-animation: bg-gradient 10s ease infinite;
     -webkit-animation: bg-gradient 10s ease infinite;
     font-family: "JetBrains Mono";
-    font-size: 18px;
+    font-size: 1.125rem;
     margin: unset !important; /* idk why it does that */
 }
 
@@ -220,28 +220,28 @@ h1, h1 a {
 but i prefer how it looks so i just use the same styling again */
 h2, h2 a {
     color: var(--text);
-    font-size: 32px;
+    font-size: 2rem;
     text-decoration: none;
 }
 
 h3 {
-    font-size: 20px
+    font-size: 2rem;
 }
 
 /* text */
 p, li, button {
-    font-size: 20px;
+    font-size: 1.125rem;
 }
 
 /* links should look good i think */
 a {
-    font-size: 18px;
+    font-size: 1.125rem;
     color: var(--green);
 }
 
 /* smol text */
 small, small a {
-    font-size: 14px;
+    font-size: 0.875rem;
 }
 
 /* lists need some styling */
@@ -644,7 +644,7 @@ footer {
     .fediring {
         a {
             display: inline-grid;
-            font-size: 24px;
+            font-size: 1.5rem;
             color: var(--green);
             margin-bottom: .5em;
             vertical-align: bottom;
@@ -687,7 +687,7 @@ footer {
     }
     p, a {
         text-align: center;
-        font-size: 15px;
+        font-size: 0.938rem;
         margin: .2em 0px .2em;
         text-decoration: none;
     }
@@ -800,6 +800,21 @@ footer {
     100% { background-position: 0% 27% }
 }
 
+/* disable certain animations if user has animations disabled on their system */
+
+@media (prefers-reduced-motion) {
+    body {
+        background: var(--base) !important;
+        animation: unset !important;
+        -moz-animation: unset !important;
+        -webkit-animation: unset !important;
+    }
+
+    #sneexy > section > #pfp {
+        animation: unset !important;
+    }
+}  
+
 /* modify widths and spacing depending on the size of the display */
 
 @media screen and (max-width: 59em) {