Honor prefers-reduced-motion setting

src/assets/css/style.css

@@ -1,24 +1,24 @@
 @font-face{
   font-family: brandon light;
-  src:url(../font.woff2)
+  src: url(../font.woff2);
 }
 *{
   margin: 0;
   padding: 0;
   position: relative;
   box-sizing: border-box;
-  overflow:hidden
+  overflow: hidden;
 }
 
 html,body{
-  height:100%
+  height: 100%;
 }
 
 body{
   display: flex;
   justify-content: center;
   align-items: center;
-  background:#000
+  background: #000;
 }
 
 #bg-video {
@@ -34,11 +34,11 @@ body{
   filter: brightness(75%);
 } 
 
-.nav-home, .nav-as, .nav-about {
+a[class^="nav-"] {
   cursor: pointer;
 }
 
-#home {
+#page-home {
   z-index: 1;
   display: flex;
   flex-direction: column;
@@ -54,7 +54,7 @@ body{
     letter-spacing: 0.25em;
     margin-right: -0.25em;
   }
-  & .social {
+  & .links {
     margin-top: .5vmin;
     font-family: brandon light;
     font-size: 4.25vmin;
@@ -77,7 +77,7 @@ body{
   align-items: center;
   justify-content: center;
   background-color: rgba(0,0,0,0.5);
-  color: #FFFFFF;
+  color: #ffffff;
   text-decoration: none;
   font-size: 1.39vmin;
   font-weight: bold;
@@ -102,3 +102,20 @@ body{
   font-weight: 700;
   cursor: pointer;
 }
+
+@media (prefers-reduced-motion) {
+  #bg-video {
+    visibility: hidden;
+  }
+  #page-home {
+    color: #ffffff;
+    filter: none;
+    mix-blend-mode: unset;
+    & .links a {
+      color: #ffffff;
+    }
+  }
+  .hint {
+    visibility: hidden;
+  }
+}