merge... yay....

site/main.css

@@ -1,23 +1,65 @@
+[!]
+[#config.stx]
+@font-face {
+  font-family: FiraCode;
+  src: url("[^baseurl]/res/FiraCode-Medium.ttf");
+}
+
 body {
-    margin: 0px;
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
+  background-image: url("[^baseurl]/res/tile.svg");
+  background-color: rgb(255, 255, 210);
+  background-position: center;
+  background-attachment: fixed;
 }
 
 #header {
-    position: sticky;
-    top: 0px;
-    padding: 10px;
-    background-color: white;
-    box-shadow: 0px 0px 5px 5px black;
-    transition: transform 0.5s;
+  max-width: 800px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: white;
+  box-shadow: 5px 5px 0px 0px black;
+  margin-top: 50px;
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0px;
+  transition: transform 0.2s;
 }
 
-#footer {
-    margin-top: auto;
+#header > div {
+  display: grid;
+  height: 100%;
+  grid-template-rows: 50% 50%;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column dense;
 }
 
-#header.hide {
-    transform: translateY(-100%);
-}
+#header > div > a {
+  font-family: FiraCode;
+  text-decoration: none;
+  color: black;
+  transition: color 0.1s;
+}
+
+#header > div > a:hover {
+  color: rgb(255, 204, 0);
+}
+
+.center-text {
+  margin-top: 100px;
+  background-color: white;
+  max-width: 1000px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 50px;
+  border-left: 5px solid rgb(255, 204, 0);
+}
+
+#header.slide-away {
+  transform: translateY(calc(-100% - 5px));
+}