icon fixes, loading optimizations

input.scss

@@ -30,7 +30,6 @@ input, select, textarea, .textarea {
     }
 
     &:active.undecorated, &:focus.undecorated {
-        -webkit-appearance: none;
         appearance: none;
         outline: none;
         border-style: none;
@@ -91,6 +90,50 @@ input[type="datetime-local"] {
     padding-left: .5rem;
 }
 
+.inputWithIcon {
+    position: relative;
+
+    .frontIcon, .endIcon {
+        color: var(--input-icon-color);
+        font-size: 1rem;
+        position: absolute;
+        padding: .5rem;
+        font-weight: 200;
+    }
+
+    .frontIcon {
+        left: 0;
+        top: 0;
+    }
+
+    .endIcon {
+        right: 0;
+        top: 0;
+    }
+
+    .frontIcon + input[type="text"], .frontIcon + input[type="password"] {
+        padding-left: 2.5rem;
+    }
+
+    input[type=text]:active, input[type=text]:focus,
+    input[type=password]:active, input[type=password]:focus {
+        border: 1px solid var(--input-border-active);
+        color: var(--text-on-background-color);
+    }
+
+    input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon,
+    input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon,
+    input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon,
+    input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon {
+        color: var(--input-icon-color-active);
+    }
+
+    input[type=text]~.endIcon, input[type=text]~.endIcon,
+    input[type=password]~.endIcon, input[type=password]~.endIcon {
+        cursor: pointer;
+    }
+}
+
 .inputWrapper {
     display: inline-flex;
     flex-direction: row;
@@ -114,6 +157,7 @@ input[type="datetime-local"] {
         .frontIcon, .endIcon {
             color: var(--input-icon-color);
             font-size: 1.1rem;
+            font-weight: 200;
             position: absolute;
             top: 0;
             padding: .25rem .6rem .6rem .4rem;
@@ -319,9 +363,6 @@ textarea, .textarea {
 label.radio, label.checkbox {
     display: inline-flex;
     align-items: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     cursor: pointer;
 
@@ -388,8 +429,6 @@ label {
                 height: 6px;
                 border: solid white;
                 border-width: 0 3px 3px 0;
-                -webkit-transform: rotate(45deg);
-                -ms-transform: rotate(45deg);
                 transform: rotate(45deg);
             }
         }
@@ -461,8 +500,6 @@ select.plain {
     border: none;
     outline: none;
     display: inline-block;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: pointer;
     box-shadow: none;

nav.scss

@@ -62,7 +62,6 @@ body > nav {
     input + ul {
         .expand {
             transition: all .3s ease;
-            margin-left: 1rem;
             transform: rotateZ(0deg);
         }
 
@@ -121,8 +120,11 @@ body > nav {
     }
 
     i {
-        margin-right: 5px;
         flex-grow: 0;
+
+        &+span {
+            margin-left: 5px;
+        }
     }
 }
 

section.scss

@@ -6,11 +6,11 @@
     margin: 5rem;
     padding: 3rem;
     text-align: center;
-    border: 1rem solid rgba(0, 0, 0, 0.1);
+    border: 5px solid rgba(92, 2, 2, 0.1);
 
     &:before {
-        font-family: 'FontAwesome', serif;
-        content: '\f03a';
+        font-family: 'Material Symbols Outlined', serif;
+        content: 'question_mark';
         color: rgba(0, 0, 0, 0.1);
     }
 }