Lots of new stuff for rework

css/main.css

@@ -1,6 +1,11 @@
 :root {
-  --color-background: #010101;
-  --color-foreground: #aa0000;
+  --color-background: #0f0f0f;
+  --color-foreground: #dd0000;
+
+  --frame-spacing: 15px;
+  --frame-border-radius: 10px;
+
+  --main-view-width: 80vw;
 }
 
 * {
@@ -14,26 +19,154 @@ html {
   color: var(--color-foreground);
 }
 
+#page-heading {
+  font-size: 30pt;
+  text-align: center;
+  font-style: italic;
+  letter-spacing: 0.10em;
+}
+
+@media (max-width: 900px) {
+  #page-heading {
+    font-size: 20pt;
+  }
+}
+
+#main {
+  margin-top: 20px;
+  margin-bottom: 100px;
+  width: var(--main-view-width);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  padding: 20px;
+  gap: var(--frame-spacing);
+  margin-inline: auto;
+} 
+#main > * {
+  flex: 1 1 auto;
+}
+
+#tui-status-bar {
+  width: 100vw;
+  border-top: 2px solid var(--color-foreground);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  padding: 20px;
+  max-height: 30px;
+  display: flex;
+}
+#tui-status-bar p {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+#tui-status-bar p::before {
+  content: ':';
+  margin-right: 3px;
+}
+
+
+/* TUI FRAME */
+
 .tui-frame {
-  width: 100%;
+  width: auto;
   height: auto;
   padding: 20px;
   border: 2px solid var(--color-foreground);
-  border-radius: 10px;
-  margin: 20px;
+  border-radius: var(--frame-border-radius);
   position: relative;
+  display: flex;
 }
 
 .tui-frame-header {
   position: absolute;
   top: 0;
-  left: 25px;
+  left: 20px;
   transform: translateY(-50%);
   background-color: var(--color-background);
   padding: 0 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
 }
 
-.tui-frame-content p{
-  font-size: 12pt;
-  margin: 15px 0 15px 0;
+.tui-frame-content * {
+  font-size: 14pt;
+  /* display: block; */
 }
+
+.tui-frame-content p {
+  margin-bottom: 30px;
+}
+
+.tui-frame-content h2 {
+  font-size: 19pt;
+  font-style: italic;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  margin-top: 20px;
+}
+
+.tui-frame-content h2::before {
+  content: '// ';
+}
+
+.tui-frame-content li {
+  display: flex; 
+  align-items: center;
+  margin-top: 5px; 
+  align-items: baseline;
+}
+
+.tui-frame-content li::before {
+  content: "*";
+  display: inline;
+  margin-right: 5px;
+}
+
+.tui-frame-single-image {
+  display: block;
+  margin: auto;
+  width: 80%;
+}
+
+.tui-frame-section {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+  gap: 10px;
+}
+.tui-frame-section * {
+  margin-right: 10px;
+}
+
+
+/* CONTROLS */
+button {
+  color: var(--color-foreground);
+  background-color: transparent;
+  border: 2px solid var(--color-foreground);
+  padding: 5px;
+  text-decoration: underline;
+} 
+button:hover {
+  transform: scale(1.05, 1.05);
+}
+
+a {
+  text-decoration: underline;
+  color: var(--color-foreground);
+  font-style: italic;
+  display: inline !important;
+}
+
+input {
+  color: var(--color-foreground);
+  background-color: transparent;
+  border: 2px solid var(--color-foreground);
+  padding: 5px;
+  text-decoration: underline;
+}