1 files changed, 114 insertions, 14 deletions

diff --git a/src/main.css b/src/main.css
index 2c53965..45911ed 100644
--- a/src/main.css
+++ b/src/main.css
@@ -2,11 +2,15 @@ html, body {
     margin: 0;
     padding: 0;
     border: 0;
-    background-color: grey;
+    background-color: var(--background-tertiary);
 }
 footer {
-    border-top: 2px solid black;
+    border-top: 2px solid var(--text-primary);
     font-weight: bold;
+    background-color: var(--background);
+    position: sticky;
+    bottom: 0;
+    width: 100%;
 }
 footer > center > p {
     margin: 0;
@@ -17,17 +21,33 @@ body {
     height: 100vh;
     width: 100vw;
 }
-#content {
+#page {
     flex-grow: 1;
-    max-width: 70vw;
+    max-width: 65vw;
+    min-width: 45vw;
     margin: auto;
+    padding: 20px;
     display: flex;
     flex-direction: column;
+    background-color: var(--background);
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+hr {
+    color: var(--text-primary);
+    width: 100%;
+}
+#content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background-color: var(--background);
+    padding: 20px;
 }
 form {
     display: flex;
     flex-direction: column;
-    max-width: 40vw;
     align-self: center;
 }
 form > label {
@@ -35,29 +55,109 @@ form > label {
 }
 
 input:invalid {
-    border: 2px dotted red;
+    border: 4px dotted var(--text-warning);
 }
 
 bold {
     font-weight: bold;
-    color: red;
-    background-color: black;
+    color: var(--text-warning);
+    background-color: var(--background);
 }
 
+header {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: sticky;
+    top: 0;
+    width: 100%;
+}
+a:last-child > .navbutton {
+    border-right: none;
+}
+.button {
+    padding: 2px 10px 2px 10px;
+    border-right: 2px solid var(--text-primary);
+    font-family: inherit;
+    font-size: inherit;
+    background-color: var(--background);
+    border: 2px solid var(--text-primary);
+}
+.formbutton {
+    box-shadow: none;
+    border-radius: 0;
+    margin-top: 6px;
+}
+.navbutton {
+    border: none;
+    border-right: 2px solid var(--text-primary);
+    border-bottom: 2px solid var(--text-primary);
+}
+.button:hover {
+    background-color: var(--secondary);
+}
+
+input {
+    font-family: inherit;
+    font-size: inherit;
+    border: 4px dotted var(--text-primary);
+    background-color: var(--background-seconday);
+}
+form > select.button {
+    background-color: var(--background-seconday);
+    border: 4px dotted var(--text-primary);
+}
+
+.halfbox {
+    width: 50%;
+    display: grid;
+    flex-grow: 1;
+    align-content: start;
+}
+.formbox {
+    display: grid;
+    flex-grow: 1;
+    align-content: start;
+    align-self: start;
+}
+
+#page > center > h2 {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+header > a, header > a:visited, header > a:link {
+        text-decoration: none;
+        color: var(--text-primary);
+        font-weight: bold;
+        justify-content: center;
+        flex-grow: 1;}
+
 :root {
-    --primary: #efefef;
-    --text-primary: #222;
+    --background: #fbf9f4;
+    --background-seconday: #fbfaca;
+    --background-tertiary: #e0e0e0;
+    --primary: #222;
+    --secondary: #ccc;
+    --text-primary: #4f474a;
+    --text-warning: red;
+    font-family: monospace;
+    font-size: 2em;
+    color: var(--text-primary)
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --primary: #222;
-        --text-primary: #eee;
     }
 }
 
-@media screen and (max-width: 500px) {
-    #content {
+@media screen and (max-width: 800px) {
+    #page {
+        max-width: 100vw;
+        min-width: 90vw;
+    }
+    #content > div {
+        width: 100%;
         max-width: unset;
     }
 }
\ No newline at end of file