src/css.css

@@ -31,7 +31,7 @@
 :root {
   --bg-color: #ecdfec;
   --font-color: #333333;
-  --code-border-color: #1a1a1a;
+  --pre-border-color: #1a1a1a;
   --link-color: #2b58de;
   --link-color-visited: #6047eb;
   --header-bg-color: #E1CFE1;
@@ -40,7 +40,7 @@
   @media (prefers-color-scheme: dark) {
     --bg-color: #1f131f;
     --font-color: #cccccc;
-    --code-border-color: #333333;
+    --pre-border-color: #333333;
     --link-color: #577AE4;
     --link-color-visited: #8775EF;
     --header-bg-color: #2F1D2F;
@@ -50,7 +50,6 @@
 
 body {
   background-color: var(--bg-color);
-  margin: 0;
 }
 
 p, h1, ul, h1, h2, h3, nav, header {
@@ -58,14 +57,17 @@ p, h1, ul, h1, h2, h3, nav, header {
   font-family: atkinsonhyperlegible, Verdana, sans-serif;
 }
 
-p, ul, nav, code {
+p, ul, nav, header {
   font-size: 22px;
 }
 
 code {
   background-color: #1a1a1a;
   color: #e6e6e6;
-  border: 5px solid var(--code-border-color);
+  font-size: 22px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: var(--pre-border-color);
   overflow: scroll;
   text-wrap: nowrap;
   display: block;
@@ -73,14 +75,18 @@ code {
 
 a {
   text-decoration: underline dashed;
+}
 
-  &:link {
+a:link {
-    color: var(--link-color);
+  color: var(--link-color);
-  }
+}
 
-  &:visited {
+a:visited {
-    color: var(--link-color-visited);
+  color: var(--link-color-visited);
-  }
+}
+
+.center_text {
+  text-align: center;
 }
 
 #pagewrap {
@@ -96,6 +102,10 @@ a {
   }
 }
 
+body {
+  margin: 0;
+}
+
 nav {
   font-family: comicmono, monospace;
   font-weight: bold;
@@ -105,10 +115,12 @@ nav {
   background-color: var(--header-bg-color);
   text-align: center;
   padding: 20px;
-  border-bottom: 2px dashed var(--header-border-color);
+  border-style: dashed;
-
+  border-width: 0 0 2px 0;
-  & h1 {
+  border-color: var(--header-border-color)
-    margin: 20px 0 0 0;
-    font-size: 24px;
-  }
 }
+
+#header-div h1 {
+  margin: 20px 0 0 0;
+  font-size: 24px;
+}