Edit fonts

css/style.css

@@ -1,113 +1,165 @@
 @charset "UTF-8";
 @font-face {
   font-family: "Iosevka Slab Regular";
-  src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); }
+  src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
+}
+
 :root {
-  font-family: "Iosevka Slab Regular", "monospace";
+  font-family: "Iosevka Slab Regular", "Iosevka Slab", "Consolas", "monospace";
   background-color: black;
   color: #c9c9c9;
   border-color: #c9c9c9;
   font-weight: 400;
   font-size: 16px;
-  line-height: 21px; }
+  line-height: 21px;
+}
+
 
 /* General styles for elements */
+
 * {
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
 p {
-  width: auto; }
+  width: auto;
+}
 
 b {
-  font-weight: 1000; }
+  font-weight: 1000;
+}
 
 li {
-  list-style: none; }
+  list-style: none;
+}
 
 ul {
-  padding-left: 1ch; }
+  padding-left: 1ch;
+}
 
 a {
-  color: #c9c9c9; }
+  color: #c9c9c9;
+}
+
 a:hover {
   cursor: pointer;
   color: #c9c9c9;
-    background-color: #171c94; }
+  background-color: #171c94;
+}
 
 nav ul>li>ul:hover a {
-  color: #c9c9c9; }
+  color: #c9c9c9;
+}
 
 hr {
   height: 10.5px;
   border: 0;
   border-bottom: 1px solid #c9c9c9;
-  margin-bottom: 15px; }
+  margin-bottom: 15px;
+}
 
-nav li hr, li.button-list > ul a hr, .white hr {
+nav li hr,
-  border-color: black; }
+li.button-list>ul a hr,
+.white hr {
+  border-color: black;
+}
+
+nav>li>ul li>ul:hover>hr,
+li.button-list>ul:hover a hr {
+  border-color: #c9c9c9;
+}
 
-nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
-  border-color: #c9c9c9; }
 
 /* Lists */
+
 li:not(.button-list)>ul::before {
-  content: "- "; }
+  content: "- ";
+}
+
 li.button-list>ul {
   width: calc(100% - 1ch);
-  text-decoration: underline; }
+  text-decoration: underline;
+}
+
 li.button-list>ul:hover {
   cursor: pointer;
   color: #c9c9c9;
-    background-color: #171c94; }
+  background-color: #171c94;
+}
+
 li.button-list>ul>li {
-    width: 100%; }
+  width: 100%;
+}
+
 li.button-list>ul a {
   display: block;
-    width: 100%; }
+  width: 100%;
+}
+
 
 /* Navbars */
+
 @keyframes hide {
   0% {
     opacity: 0;
-    left: inherit; }
+    left: inherit;
+  }
   1% {
-    opacity: 0; }
+    opacity: 0;
+  }
   100% {
     opacity: 0;
-    left: -9999px; } }
+    left: -9999px;
+  }
+}
+
 nav a {
   color: black;
   display: block;
   width: 100%;
-  text-decoration: none; }
+  text-decoration: none;
+}
+
 nav ul::before {
-  content: "" !important; }
+  content: "" !important;
+}
+
 nav>li {
   background-color: #c9c9c9;
   color: black;
   border-color: black;
-  margin-left: 0; }
+  margin-left: 0;
+}
+
 nav>li>ul {
   margin: 0;
   padding: 0;
   display: table-cell;
   padding-left: 1ch;
-    padding-right: 1ch; }
+  padding-right: 1ch;
+}
+
 nav>li>ul:hover {
   cursor: pointer;
   color: #c9c9c9;
-      background-color: #171c94; }
+  background-color: #171c94;
+}
+
 nav>li>ul:focus {
   background-color: #171c94;
   color: #c9c9c9;
-      border-color: #c9c9c9; }
+  border-color: #c9c9c9;
+}
+
 nav>li>ul:focus li {
   display: block;
   opacity: 1;
   left: inherit;
   animation-name: hide;
-        animation-name: none; }
+  animation-name: none;
+}
+
 nav>li>ul>li {
   background-color: #c9c9c9;
   color: black;
@@ -125,20 +177,27 @@ nav > li {
   opacity: 0;
   left: -9999px;
   animation-name: hide;
-      animation-duration: 0.5s; }
+  animation-duration: 0.5s;
+}
+
 nav>li>ul>li>ul {
   background-color: #c9c9c9;
   color: black;
   border-color: black;
   padding-left: 1ch;
   padding-right: 1ch;
-        min-height: 21px; }
+  min-height: 21px;
+}
+
 nav>li>ul>li>ul:hover {
   background-color: #171c94;
   color: #c9c9c9;
-          border-color: #c9c9c9; }
+  border-color: #c9c9c9;
+}
+
 
 /* Miscallaneous Classes */
+
 .box {
   border: 2px solid #c9c9c9;
   margin: 0.5ch;
@@ -148,9 +207,13 @@ nav > li {
   margin-bottom: 10.5px;
   padding-top: 8.5px;
   padding-bottom: 8.5px;
-  vertical-align: top; }
+  vertical-align: top;
+}
+
 .box.inline {
-    display: inline-block; }
+  display: inline-block;
+}
+
 .box.double {
   border-style: double;
   border-width: 4px;
@@ -159,56 +222,85 @@ nav > li {
   margin-top: 10.5px;
   margin-bottom: 10.5px;
   padding-top: 6.5px;
-    padding-bottom: 6.5px; }
+  padding-bottom: 6.5px;
+}
+
 .box.black {
   background-color: black;
   color: #c9c9c9;
   border-color: #c9c9c9;
-    box-shadow: 0 0 0 0.25ch black; }
+  box-shadow: 0 0 0 0.25ch black;
+}
+
 .box.white {
   background-color: #c9c9c9;
   color: black;
   border-color: black;
-    box-shadow: 0 0 0 0.25ch #c9c9c9; }
+  box-shadow: 0 0 0 0.25ch #c9c9c9;
+}
+
 .box.white a {
-      color: black; }
+  color: black;
+}
+
 .box.white a:hover {
   background-color: #171c94;
   color: #c9c9c9;
-        border-color: #c9c9c9; }
+  border-color: #c9c9c9;
+}
+
 .box.blue {
   background-color: #171c94;
   color: #c9c9c9;
   border-color: #c9c9c9;
-    box-shadow: 0 0 0 0.25ch #171c94; }
+  box-shadow: 0 0 0 0.25ch #171c94;
+}
+
 .box.blue li.button-list>ul:hover {
   background-color: #c9c9c9;
   color: black;
-      border-color: black; }
+  border-color: black;
+}
+
 .box.blue li.button-list>ul:hover>a {
-      color: black; }
+  color: black;
+}
+
 .box.blue a:hover {
   background-color: #c9c9c9;
   color: #171c94;
-      border-color: #171c94; }
+  border-color: #171c94;
+}
+
 .box.blue hr {
-      border-color: #c9c9c9; }
+  border-color: #c9c9c9;
+}
+
 .box.blue button:hover {
   background-color: #c9c9c9;
   color: #171c94;
-      border-color: #171c94; }
+  border-color: #171c94;
-    .box.blue .checkbox-right:hover, .box.blue .checkbox-left:hover, .box.blue .radio-right:hover, .box.blue .radio-left:hover {
+}
+
+.box.blue .checkbox-right:hover,
+.box.blue .checkbox-left:hover,
+.box.blue .radio-right:hover,
+.box.blue .radio-left:hover {
   background-color: #c9c9c9;
   color: #171c94;
-      border-color: #171c94; }
+  border-color: #171c94;
+}
 
 .list-symbol::after {
-  content: " ▼"; }
+  content: " ▼";
+}
 
 .no-select {
   user-select: none;
   -moz-user-select: none;
-  -webkit-user-select: none; }
+  -webkit-user-select: none;
+}
+
 
 /* How to add pages:
 *
@@ -221,149 +313,215 @@ nav > li {
 *   }
 * }
 */
-/* Form styles */
-input[type=checkbox], input[type=radio] {
-  display: none; }
 
-.checkbox-right:hover, .checkbox-left:hover, .radio-right:hover, .radio-left:hover {
+
+/* Form styles */
+
+input[type=checkbox],
+input[type=radio] {
+  display: none;
+}
+
+.checkbox-right:hover,
+.checkbox-left:hover,
+.radio-right:hover,
+.radio-left:hover {
   cursor: pointer;
   color: #c9c9c9;
-  background-color: #171c94; }
+  background-color: #171c94;
+}
 
 .checkbox-right::after {
-  content: "[ ]"; }
+  content: "[ ]";
+}
 
 .checkbox-left::before {
-  content: "[ ]"; }
+  content: "[ ]";
+}
 
 .radio-right::after {
-  content: "( )"; }
+  content: "( )";
+}
 
 .radio-left::before {
-  content: "( )"; }
+  content: "( )";
+}
 
 input[type=checkbox]:checked+.checkbox-right::after {
-  content: "[x]"; }
+  content: "[x]";
+}
+
 input[type=checkbox]:checked+.checkbox-left::before {
-  content: "[x]"; }
+  content: "[x]";
+}
 
 input[type=radio]:checked+.radio-right::after {
-  content: "(x)"; }
+  content: "(x)";
-input[type=radio]:checked + .radio-left::before {
+}
-  content: "(x)"; }
 
-input[type=text], button {
+input[type=radio]:checked+.radio-left::before {
+  content: "(x)";
+}
+
+input[type=text],
+button {
   background-color: inherit;
   border: none;
   font-family: inherit;
   font-size: inherit;
-  color: inherit; }
+  color: inherit;
-  input[type=text]:hover, button:hover {
+}
+
+input[type=text]:hover,
+button:hover {
   cursor: pointer;
   color: #c9c9c9;
-    background-color: #171c94; }
+  background-color: #171c94;
+}
 
 label:hover {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
-button:focus, button:hover, button:active, button::-moz-focus-inner {
+button:focus,
+button:hover,
+button:active,
+button::-moz-focus-inner {
   border: none;
-  text-decoration: none; }
+  text-decoration: none;
+}
+
 button::before {
-  content: "[ "; }
+  content: "[ ";
+}
+
 button::after {
-  content: " ]"; }
+  content: " ]";
+}
 
 .textinput {
-  display: inline-block; }
+  display: inline-block;
+}
+
 .textinput:hover {
   cursor: pointer;
   color: #c9c9c9;
-    background-color: #171c94; }
+  background-color: #171c94;
+}
+
 .textinput::before {
-    content: "["; }
+  content: "[";
+}
+
 .textinput::after {
-    content: "]"; }
+  content: "]";
+}
+
 .textinput:hover>input[type=text] {
   background-color: #171c94;
   color: #c9c9c9;
-    border-color: #c9c9c9; }
+  border-color: #c9c9c9;
+}
 
 input[type=text] {
   background-color: #c9c9c9;
   color: black;
   border-color: black;
-  width: 15ch; }
+  width: 15ch;
+}
+
 
 /* Style helpers, like space-takers */
+
 .space-1 {
-  min-height: 21px; }
+  min-height: 21px;
+}
 
 .space-2 {
-  min-height: 42px; }
+  min-height: 42px;
+}
 
 .space-3 {
-  min-height: 63px; }
+  min-height: 63px;
+}
 
 .space-4 {
-  min-height: 84px; }
+  min-height: 84px;
+}
 
 .space-5 {
-  min-height: 105px; }
+  min-height: 105px;
+}
 
 .width-5 {
-  width: 5ch; }
+  width: 5ch;
+}
 
 .width-10 {
-  width: 10ch; }
+  width: 10ch;
+}
 
 .width-15 {
-  width: 15ch; }
+  width: 15ch;
+}
 
 .width-20 {
-  width: 20ch; }
+  width: 20ch;
+}
 
 .width-25 {
-  width: 25ch; }
+  width: 25ch;
+}
 
 .width-50 {
-  width: 48ch; }
+  width: 48ch;
+}
 
 .width-100 {
-  width: 98ch; }
+  width: 98ch;
+}
 
 .width-150 {
-  width: 148ch; }
+  width: 148ch;
+}
 
 .width-200 {
-  width: 198ch; }
+  width: 198ch;
+}
 
 .width-250 {
-  width: 248ch; }
+  width: 248ch;
+}
 
 .padding-1 {
   padding: 1ch;
   padding-top: 21px;
-  padding-bottom: 21px; }
+  padding-bottom: 21px;
+}
 
 .padding-2 {
   padding: 2ch;
   padding-top: 42px;
-  padding-bottom: 42px; }
+  padding-bottom: 42px;
+}
 
 .padding-3 {
   padding: 3ch;
   padding-top: 63px;
-  padding-bottom: 63px; }
+  padding-bottom: 63px;
+}
 
 .padding-4 {
   padding: 4ch;
   padding-top: 84px;
-  padding-bottom: 84px; }
+  padding-bottom: 84px;
+}
 
 .padding-5 {
   padding: 5ch;
   padding-top: 105px;
-  padding-bottom: 105px; }
+  padding-bottom: 105px;
+}
+
 
 /*# sourceMappingURL=style.css.map */