chore: restructure site

site/global.css

@@ -0,0 +1,104 @@
+@font-face {
+    font-family: 'Comic Relief';
+    src: url('/site/fonts/ComicRelief-Bold.ttf') format('truetype'); 
+    font-weight: normal;
+    font-style: normal;
+}
+
+html {
+    background-color: #008080;
+    background-repeat: repeat;
+    background-attachment: fixed;
+    background-position: center center;
+    
+    min-width: 350px;
+    font-size: 1.25em;
+    
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 1em auto;
+    width: 100%;
+    max-width: 1000px;
+    line-height: 1.25;
+    font-size: 0.9em;
+    font-family: 'Comic Relief', serif;
+}
+
+.header {
+    color: white;
+    margin: 2em 0;
+}
+
+.container {
+    display: flex;
+    
+    flex-direction: row;
+    gap: 1em;
+}
+
+.subcontainer {
+    display: flex;
+    
+    flex-direction: column;
+    gap: 20px;
+}
+
+.box-lp {
+    flex: 1;
+}
+
+.box-content {
+    flex: 4;
+}
+
+.box-rp {
+    flex: 1;
+}
+
+@media (width < 1200px) {
+    body {
+        max-width: calc(100% - 2em);
+    }
+}
+
+@media (width < 600px) {
+    .container {
+        flex-direction: column;
+    }
+}
+
+td {
+    vertical-align: top;
+}
+
+td:first-child {
+    font-weight: bold;
+}
+
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+h3 {
+    font-size: 1.25em;
+}
+
+h4,h5,h6 {
+    font-size: 1.1em;
+}
+
+ul {
+    padding-left: 1em;
+}
+
+div {
+    font-size: 1.2em;
+}