autopref & typo

index.html

@@ -94,7 +94,7 @@
           </p>
           <blockquote>
             "[System Warriors] took the camp while the savages
-            <span class="rdct">celebrated1</span> their leader's 17th year." -
+            <span class="rdct">celebrated</span> their leader's 17th year." -
             <b>Pvt Venter</b>
           </blockquote>
         </article>

res/asset-index-style.css

@@ -1,7 +1,15 @@
 #ndx-ndx {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-box-pack: space-evenly;
+  -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
 }
 #ndx-ndx > section {
@@ -12,7 +20,12 @@
 }
 #ndx-news,
 #ndx-more {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
   flex-direction: column;
   width: min(90%, 500px);
 }

style.css

@@ -7,13 +7,13 @@
   --desirable: #7eddcd;
   --detestable: #bd4c58;
   --accent: #ded5bd;
-  --hover: ;
 
   --link: #0c4649;
   --link-hover: #177479;
 }
 
 * {
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -60,9 +60,17 @@ a:hover {
 }
 
 nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-box-pack: space-evenly;
+  -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
   margin: auto;
   width: min(100%, 1000px);
@@ -88,6 +96,7 @@ nav a:hover {
 #subsystem {
   position: relative;
   height: 41px;
+  -webkit-animation: glitch 1s infinite;
   animation: glitch 1s infinite;
 }
 #nonintrude {
@@ -143,6 +152,36 @@ blockquote b {
   color: var(--text);
 }
 
+@-webkit-keyframes glitch {
+  0% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
+  }
+  13% {
+    text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
+  }
+  15% {
+    text-shadow: #00a589c5 -1px 1px 1px, #52525295 1px -1px;
+  }
+  38% {
+    text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
+  }
+  50% {
+    text-shadow: #00a589c5 -1px -1px 1px, #52525295 -1px 1px;
+  }
+  63% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
+  }
+  75% {
+    text-shadow: #00a589c5 -1px -1px 1px, #52525295 1px 0px;
+  }
+  88% {
+    text-shadow: #00a589c5 1px 1px 1px, #52525295 -1px 1px;
+  }
+  100% {
+    text-shadow: #00a589c5 -1px 1px 1px, #52525295 0px 1px;
+  }
+}
+
 @keyframes glitch {
   0% {
     text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;

subsystem/substyle.css

@@ -11,6 +11,7 @@
 }
 
 * {
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -35,7 +36,12 @@ a:hover {
   background-color: var(--orange);
 }
 nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
   width: 100%;
   text-align: center;
@@ -46,6 +52,10 @@ nav a {
   background-color: var(--red);
   color: var(--white);
 
+  -webkit-transition: ease-out 100ms;
+
+  -o-transition: ease-out 100ms;
+
   transition: ease-out 100ms;
 }
 nav a:hover {
@@ -58,6 +68,8 @@ nav a:hover {
   left: 40px;
   width: 80%;
   height: 60px;
+  -webkit-transform: rotate(-0.4deg);
+  -ms-transform: rotate(-0.4deg);
   transform: rotate(-0.4deg);
   background-color: var(--orange);
 }
@@ -75,7 +87,10 @@ nav a:hover {
 #headnav {
   margin: 20px auto;
   margin-bottom: 30px;
+  -webkit-transform: rotate(1deg);
+  -ms-transform: rotate(1deg);
   transform: rotate(1deg);
+  -webkit-box-shadow: #00000085 0 1px 2px;
   box-shadow: #00000085 0 1px 2px;
 }
 #headnav a {
@@ -85,6 +100,8 @@ nav a:hover {
   margin-left: 10px;
 }
 #headnav .spacer {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
@@ -94,6 +111,8 @@ nav a:hover {
   margin-top: 30px;
 }
 #socials a {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
   flex-grow: 1;
   width: calc(100% / 5);
   padding: 5px;
@@ -111,10 +130,14 @@ nav a:hover {
     left: 0;
     height: 100%;
     width: 25px;
+    -webkit-writing-mode: vertical-rl;
+    -ms-writing-mode: tb-rl;
     writing-mode: vertical-rl;
     text-orientation: mixed;
     margin: auto 0;
     margin-right: 5px;
+    -webkit-transform: rotate(0deg) !important;
+    -ms-transform: rotate(0deg) !important;
     transform: rotate(0deg) !important;
 
     z-index: 100;