Big refactor, jam

25 files changed, 680 insertions, 734 deletions

diff --git a/assets/css/advent.css b/assets/css/advent.css
new file mode 100644
index 0000000..c6097b8
--- /dev/null
+++ b/assets/css/advent.css
@@ -0,0 +1,67 @@
+/* advent */
+#lcolonq-advent {
+    overflow-y: scroll;
+    color: white;
+    background-color: black;
+    min-height: 100vh;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#lcolonq-advent-container {
+    height: 100%;
+    margin-left: 3rem;
+    margin-right: 3rem;
+}
+.lcolonq-advent-header {
+    text-align: center;
+    padding-bottom: 1rem;
+}
+.lcolonq-advent-header h1 {
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    font-size: 15vw;
+}
+.lcolonq-advent-subtitle {
+    font-weight: bold;
+}
+.lcolonq-advent-body {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 40rem;
+    text-align: justify;
+}
+.lcolonq-advent-link {
+    text
+}
+.lcolonq-advent-puzzle {
+    display: block;
+    text-decoration: none;
+    color: white;
+    border: solid;
+    border-color: white;
+    margin-top: 1rem;
+    padding: 0.5rem;
+}
+.lcolonq-advent-puzzle:hover {
+    background-color: #111111;
+}
+.lcolonq-advent-puzzle h3 {
+    margin: 0px;
+}
+.lcolonq-advent-puzzle-author {
+    font-weight: bold;
+}
+.lcolonq-advent-puzzle-body {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+.lcolonq-advent-link {
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+}
+.lcolonq-advent-submit {
+    display: none;
+}
diff --git a/assets/css/auth.css b/assets/css/auth.css
new file mode 100644
index 0000000..20ab50d
--- /dev/null
+++ b/assets/css/auth.css
@@ -0,0 +1,46 @@
+/* auth */
+.lcolonq-auth {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr;
+}
+
+.lcolonq-auth-box-outer {
+    grid-row: 2;
+    grid-column: 2;
+}
+
+.lcolonq-auth-box {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.lcolonq-auth-box h1 {
+    margin-top: 0rem;
+}
+
+#lcolonq-auth-submit {
+    display: none;
+}
+
+#lcolonq-auth-below {
+    text-align: center;
+}
+
+#lcolonq-auth-register {
+    font-size: 0.7rem;
+    color: CanvasText;
+}
+
+#lcolonq-auth-error {
+    grid-row: 3;
+    grid-column: 2;
+    text-align: center;
+    color: red;
+}
diff --git a/assets/css/button.css b/assets/css/button.css
new file mode 100644
index 0000000..2a918fd
--- /dev/null
+++ b/assets/css/button.css
@@ -0,0 +1,34 @@
+/* button */
+body.lcolonq-button-body {
+    background-color: #eeeeee;
+    user-select: none;
+}
+
+.lcolonq-button {
+    position: absolute;
+    height: 90vh;
+    width: 40vw;
+    object-fit: fill;
+    image-rendering: pixelated;
+    border: dotted #888888;
+    margin-top: 5vh;
+    margin-bottom: 5vh;
+    margin-left: 5vw;
+    margin-right: 5vw;
+}
+
+a.lcolonq-button-link :hover {
+    background-color: #cccccc;
+}
+
+a.lcolonq-button-link :active {
+    background-color: #aaaaaa;
+}
+
+#lcolonq-button-green {
+    left: 0px;
+}
+
+#lcolonq-button-red {
+    right: 0px;
+}
diff --git a/assets/charsheet/charsheet.css b/assets/css/charsheet.css
index 753ea55..e973732 100644
--- a/assets/charsheet/charsheet.css
+++ b/assets/css/charsheet.css
@@ -1,6 +1,6 @@
 @font-face {
     font-family: "Iosevka Comfy";
-    src: url("../iosevka-comfy-regular.ttf") format("truetype");
+    src: url("../fonts/iosevka-comfy-regular.ttf") format("truetype");
 }
 
 @media (max-width: 768px) {
diff --git a/assets/css/gizmo.css b/assets/css/gizmo.css
new file mode 100644
index 0000000..91c6188
--- /dev/null
+++ b/assets/css/gizmo.css
@@ -0,0 +1,35 @@
+/* gizmo */
+#lcolonq-gizmo-body {
+    width: 100vw;
+    height: 100vh;
+}
+#lcolonq-gizmo {
+    width: 100%;
+    height: 100%;
+}
+#lcolonq-gizmo-top {
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    right: 0px;
+    top: 0px;
+    color: white;
+    background-color: black;
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+}
+#lcolonq-gizmo-top:hover {
+    opacity: 1;
+}
+#lcolonq-gizmo-bottom {
+    background-color: white;
+    width: 100%;
+    height: 100%;
+}
+#lcolonq-gizmo-contents {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
diff --git a/assets/css/greencircle.css b/assets/css/greencircle.css
new file mode 100644
index 0000000..d884cb9
--- /dev/null
+++ b/assets/css/greencircle.css
@@ -0,0 +1,124 @@
+/* greencircle */
+#lcolonq-gc-body {
+    overflow-y: scroll;
+    height: auto;
+}
+
+#lcolonq-gc-hero {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#lcolonq-gc-spin {
+    height: 60vh;
+    width: 60vh;
+    margin-top: 20vh;
+    margin-bottom: 20vh;
+    display: grid;
+    place-items: center;
+}
+
+#lcolonq-gc-logo {
+    grid-area: 1 / 1;
+    margin-top: 2vh;
+    margin-left: 8vh;
+    height: 100%;
+    image-rendering: pixelated;
+}
+
+#lcolonq-gc-spin-image {
+    grid-area: 1 / 1;
+    animation: spin 40s linear infinite;
+    margin-left: 2vh;
+    height: 250%;
+    width: 250%;
+    user-select: none;
+    pointer-events: none;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width : 320px) {
+    #lcolonq-gc-logo {
+        max-width: 60vw;
+        max-height: 60vw;
+    }
+    #lcolonq-gc-spin-image {
+        height: 160%;
+        width: 160%;
+    }
+}
+
+#lcolonq-gc-explainer {
+    text-align: justify;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    height: 100vh;
+    mask-image: linear-gradient(180deg, white 50%, transparent 95%);
+    overflow: hidden;
+}
+
+#lcolonq-gc-explainer h1 {
+    text-align: center;
+    font-size: 1.9rem;
+}
+
+#lcolonq-gc-relentless {
+    text-align: justify;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    text-align: center;
+}
+
+#lcolonq-gc-relentless h1 {
+    font-size: 1.9rem;
+}
+
+#lcolonq-gc-panels {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(auto-fit, 15rem);
+    grid-auto-rows: minmax(10rem, auto);
+    gap: 1rem;
+}
+
+@media (max-width : 320px) {
+    #lcolonq-gc-panels {
+        grid-template-columns: 1fr;
+    }
+}
+
+.lcolonq-gc-panel {
+    border: solid black;
+    color: inherit;
+    text-decoration: none;
+    padding: 1rem;
+    display: none;
+    cursor: pointer;
+}
+
+.lcolonq-gc-panel:hover {
+    background-color: #eeeeee;
+}
+
+.lcolonq-gc-visible {
+    display: block;
+}
+
+.lcolonq-gc-panel h2 {
+    text-align: center;
+}
+
+.lcolonq-gc-now {
+    font-weight: bold;
+    color: red;
+}
diff --git a/assets/css/jam.css b/assets/css/jam.css
new file mode 100644
index 0000000..0cc2e0a
--- /dev/null
+++ b/assets/css/jam.css
@@ -0,0 +1,48 @@
+#lcolonq-jam {
+    overflow: scroll;
+    text-align: justify;
+}
+
+.lcolonq-jam-cool {
+    text-transform: lowercase;
+}
+
+a {
+    text-decoration: none;
+    font-weight: bold;
+    color: black;
+}
+
+#lcolonq-jam h1 {
+    text-align: center;
+}
+#lcolonq-jam h2 {
+    text-align: center;
+}
+#lcolonq-jam h4 {
+    margin: 0px;
+}
+#lcolonq-jam-content {
+    max-width: 34rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+                      
+.lcolonq-green {
+    color: green;
+}
+
+.lcolonq-jam-subtitle {
+    margin-top: -1.4rem;
+    text-align: center;
+    font-size: 0.8em;
+    color: darkgrey;
+}
+
+#lcolonq-jam-footer {
+    text-align: center !important;
+    font-size: 0.5em;
+    color: darkgrey;
+}
diff --git a/assets/css/pubnix-index.css b/assets/css/pubnix-index.css
new file mode 100644
index 0000000..987f2cc
--- /dev/null
+++ b/assets/css/pubnix-index.css
@@ -0,0 +1,94 @@
+/* pubnix-index */
+body.lcolonq-pubnix-index {
+    font-family: "Iosevka Comfy";
+    font-weight: bold;
+    color: black;
+    user-select: none;
+    image-rendering: pixelated;
+    background-color: #eeeeee;
+    background-size: 40px 40px;
+    background-image:
+        linear-gradient(to right, grey 1px, transparent 1px),
+        linear-gradient(to bottom, grey 1px, transparent 1px);
+}
+
+body.lcolonq-pubnix-index-obs {
+    background-color: rbga(0,0,0,0);
+}
+
+#lcolonq-pubnix-index-title {
+    position: absolute;
+    top: 2rem;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    text-align: center;
+    font-size: 20vw;
+}
+
+.lcolonq-pubnix-index-letter {
+    display: inline-block;
+}
+
+.lcolonq-pubnix-index-letter:hover {
+    color: #333333;
+}
+
+#lcolonq-pubnix-index-subtitle {
+    font-size: 5vw;
+    margin-top: -5vw;
+    margin-right: 12vw;
+    text-align: right;
+}
+
+#lcolonq-pubnix-index-header {
+    background-color: #cccccf;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    height: 2rem;
+    border-bottom: 0.2rem ridge;
+}
+
+#lcolonq-pubnix-index-header a {
+    color: black;
+}
+
+#lcolonq-pubnix-index-header marquee {
+    color: black;
+    padding-top: 0.4rem;
+}
+
+#lcolonq-pubnix-index-footer {
+    background-color: #cccccf;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    height: 2rem;
+    border-top: 0.2rem groove;
+}
+
+#lcolonq-pubnix-index-footer a {
+    display: inline-block;
+    color: black;
+    margin-top: 0.2rem;
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+    padding: 0.1rem;
+    text-decoration: none;
+    border: 0.1rem outset;
+}
+
+#lcolonq-pubnix-index-footer a:active {
+    border: 0.1rem inset;
+}
+
+#lcolonq-pubnix-index-canvas {
+    position: absolute;
+    bottom: 2rem;
+    left: 0px;
+    width: 832px;
+    height: 832px;
+}
diff --git a/assets/css/register.css b/assets/css/register.css
new file mode 100644
index 0000000..c384e6a
--- /dev/null
+++ b/assets/css/register.css
@@ -0,0 +1,77 @@
+/* register */
+#lcolonq-register-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr;
+}
+
+#lcolonq-register-box {
+    grid-row: 2;
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#lcolonq-register-link {
+    width: max-content;
+    text-align: center;
+    display: block;
+    background-color: #6441a5;
+    border-radius: 0.5rem;
+    color: white;
+    background-color: #6441a5;
+    border-radius: 0.5rem;
+    padding: 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+#lcolonq-register-link:hover {
+    background-color: #533094;
+}
+
+#lcolonq-registered-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr;
+}
+
+#lcolonq-registered-box {
+    grid-row: 2;
+    grid-column: 2;
+    display: flex;
+    justify-content: center;
+}
+
+.lcolonq-registered-fieldname {
+    font-weight: bold;
+}
+
+#lcolonq-register-error-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr;
+}
+
+#lcolonq-register-error-box {
+    grid-row: 2;
+    grid-column: 2;
+    display: flex;
+    justify-content: center;
+}
diff --git a/assets/css/shared.css b/assets/css/shared.css
new file mode 100644
index 0000000..aed4cc7
--- /dev/null
+++ b/assets/css/shared.css
@@ -0,0 +1,30 @@
+/* shared */
+@font-face {
+    font-family: "Iosevka Comfy";
+    src: url("../fonts/iosevka-comfy-regular.ttf") format("truetype");
+}
+
+html {
+    font-family: "Iosevka Comfy";
+    font-size: 16pt;
+}
+
+body {
+    overflow: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 100%;
+    width: 100%;
+}
+
+.right {
+    float: right;
+}
+
+.lcolonq-invisible {
+    visibility: hidden;
+}
+
+.lcolonq-reverse {
+    transform: scale(-1, 1);
+}
diff --git a/assets/css/soundboard.css b/assets/css/soundboard.css
new file mode 100644
index 0000000..9e5b966
--- /dev/null
+++ b/assets/css/soundboard.css
@@ -0,0 +1,55 @@
+/* soundboard */
+#lcolonq-soundboard {
+    color: white;
+    background-color: black;
+    overflow-y: scroll;
+    height: auto;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#lcolonq-soundboard-container {
+    top: 0px;
+    width: min(90vw, 30rem);
+    height: 100%;
+}
+#lcolonq-soundboard-entryframe {
+    overflow: hidden;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+#lcolonq-soundboard-entry {
+    font-size: 30pt;
+    width: calc(100% - 2.2rem);
+    padding: 1rem;
+    color: white;
+    background-color: #111111;
+    border: 0.1rem solid darkgrey;
+}
+#lcolonq-soundboard-entry:focus {
+    outline: none;
+}
+#lcolonq-soundboard-entrytext {
+    white-space: nowrap;
+    color: darkgrey;
+}
+#lcolonq-soundboard-docs {
+    display: grid;
+    gap: 1rem;
+    grid-auto-flow: dense;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    grid-auto-rows: minmax(10rem, auto);
+    margin-bottom: 1rem;
+}
+.lcolonq-soundboard-doc {
+    border: 0.1rem solid darkgrey;
+    padding: 0.5rem;
+}
+.lcolonq-soundboard-doc h3 {
+    text-align: center;
+    margin-top: 0px;
+    margin-bottom: 0.5rem;
+}
diff --git a/assets/css/throwshade.css b/assets/css/throwshade.css
new file mode 100644
index 0000000..d49b3b4
--- /dev/null
+++ b/assets/css/throwshade.css
@@ -0,0 +1,69 @@
+/* throwshade */
+#lcolonq-throwshade-body {
+    overflow-y: scroll;
+}
+#lcolonq-throwshade {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    /* background-image: url("./assets/rectangular.jpg"); */
+    background-color: darkgray;
+    background-size: 100% 100%;
+}
+.lcolonq-throwshade-canvas {
+    width: 100%;
+    height: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+.lcolonq-throwshade-canvas canvas {
+    margin: auto;
+    display: block;
+    width: auto;
+    height: 100%;
+    image-rendering: pixelated;
+}
+#lcolonq-throwshade-bottom {
+    flex-grow: 1;
+    height: 40%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding-top: 0.6rem;
+}
+#lcolonq-throwshade-bottom-left {
+    flex-grow: 1;
+    padding-bottom: 1rem;
+    padding-left: 0.7rem;
+    padding-right: 1rem;
+}
+#lcolonq-throwshade-textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    border: none;
+    overflow: auto;
+    outline: none;
+    box-shadow: none;
+    color: white;
+    background-color: rgb(0 0 0 / 0.8);
+}
+#lcolonq-throwshade-bottom-right {
+    flex-grow: 1;
+    padding-bottom: 1rem;
+    padding-left: 0.7rem;
+    padding-right: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    max-width: 40%;
+}
+#lcolonq-throwshade-bottom-right img {
+    cursor: pointer;
+    height: 40%;
+}
+#lcolonq-throwshade-current {
+    margin: 0.5rem;
+}
diff --git a/assets/iosevka-comfy-regular.ttf b/assets/fonts/iosevka-comfy-regular.ttf
index b474adc..b474adc 100644
--- a/assets/iosevka-comfy-regular.ttf
+++ b/assets/fonts/iosevka-comfy-regular.ttf
diff --git a/assets/debtclonk.png b/assets/images/debtclonk.png
index dd56bd7..dd56bd7 100644
--- a/assets/debtclonk.png
+++ b/assets/images/debtclonk.png
diff --git a/assets/icon.png b/assets/images/icon.png
index 0431e3f..0431e3f 100644
--- a/assets/icon.png
+++ b/assets/images/icon.png
diff --git a/assets/l.png b/assets/images/l.png
index 7533019..7533019 100644
--- a/assets/l.png
+++ b/assets/images/l.png
diff --git a/assets/mrblue.png b/assets/images/mrblue.png
index 8cf2a0b..8cf2a0b 100644
--- a/assets/mrblue.png
+++ b/assets/images/mrblue.png
diff --git a/assets/mrgreen.png b/assets/images/mrgreen.png
index 1f1edca..1f1edca 100644
--- a/assets/mrgreen.png
+++ b/assets/images/mrgreen.png
diff --git a/assets/mrred.png b/assets/images/mrred.png
index 966cd1b..966cd1b 100644
--- a/assets/mrred.png
+++ b/assets/images/mrred.png
diff --git a/assets/rectangular.jpg b/assets/images/rectangular.jpg
index 5b7f79f..5b7f79f 100644
--- a/assets/rectangular.jpg
+++ b/assets/images/rectangular.jpg
diff --git a/assets/test.gif b/assets/images/test.gif
index b386852..b386852 100644
--- a/assets/test.gif
+++ b/assets/images/test.gif
diff --git a/assets/upload.gif b/assets/images/upload.gif
index e4994a3..e4994a3 100644
--- a/assets/upload.gif
+++ b/assets/images/upload.gif
diff --git a/assets/charsheet/charsheet.js b/assets/js/charsheet/charsheet.js
index c43a2b2..c43a2b2 100644
--- a/assets/charsheet/charsheet.js
+++ b/assets/js/charsheet/charsheet.js
diff --git a/assets/charsheet/gl-matrix-min.js b/assets/js/charsheet/gl-matrix-min.js
index 747b3a7..747b3a7 100644
--- a/assets/charsheet/gl-matrix-min.js
+++ b/assets/js/charsheet/gl-matrix-min.js
diff --git a/assets/main.css b/assets/main.css
deleted file mode 100644
index 1376a18..0000000
--- a/assets/main.css
+++ /dev/null
@@ -1,733 +0,0 @@
-/* shared */
-@font-face {
-    font-family: "Iosevka Comfy";
-    src: url("./iosevka-comfy-regular.ttf") format("truetype");
-}
-
-html {
-    font-family: "Iosevka Comfy";
-    font-size: 16pt;
-}
-
-body {
-    overflow: hidden;
-    margin: 0 !important;
-    padding: 0 !important;
-    height: 100%;
-    width: 100%;
-}
-
-.right {
-    float: right;
-}
-
-.lcolonq-invisible {
-    visibility: hidden;
-}
-
-.lcolonq-reverse {
-    transform: scale(-1, 1);
-}
-
-/* pubnix-index */
-body.lcolonq-pubnix-index {
-    font-family: "Iosevka Comfy";
-    font-weight: bold;
-    color: black;
-    user-select: none;
-    image-rendering: pixelated;
-    background-color: #eeeeee;
-    background-size: 40px 40px;
-    background-image:
-        linear-gradient(to right, grey 1px, transparent 1px),
-        linear-gradient(to bottom, grey 1px, transparent 1px);
-}
-
-body.lcolonq-pubnix-index-obs {
-    background-color: rbga(0,0,0,0);
-}
-
-#lcolonq-pubnix-index-title {
-    position: absolute;
-    top: 2rem;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    text-align: center;
-    font-size: 20vw;
-}
-
-.lcolonq-pubnix-index-letter {
-    display: inline-block;
-}
-
-.lcolonq-pubnix-index-letter:hover {
-    color: #333333;
-}
-
-#lcolonq-pubnix-index-subtitle {
-    font-size: 5vw;
-    margin-top: -5vw;
-    margin-right: 12vw;
-    text-align: right;
-}
-
-#lcolonq-pubnix-index-header {
-    background-color: #cccccf;
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    height: 2rem;
-    border-bottom: 0.2rem ridge;
-}
-
-#lcolonq-pubnix-index-header a {
-    color: black;
-}
-
-#lcolonq-pubnix-index-header marquee {
-    color: black;
-    padding-top: 0.4rem;
-}
-
-#lcolonq-pubnix-index-footer {
-    background-color: #cccccf;
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    height: 2rem;
-    border-top: 0.2rem groove;
-}
-
-#lcolonq-pubnix-index-footer a {
-    display: inline-block;
-    color: black;
-    margin-top: 0.2rem;
-    margin-left: 0.1rem;
-    margin-right: 0.1rem;
-    padding: 0.1rem;
-    text-decoration: none;
-    border: 0.1rem outset;
-}
-
-#lcolonq-pubnix-index-footer a:active {
-    border: 0.1rem inset;
-}
-
-#lcolonq-pubnix-index-canvas {
-    position: absolute;
-    bottom: 2rem;
-    left: 0px;
-    width: 832px;
-    height: 832px;
-}
-
-/* button */
-body.lcolonq-button-body {
-    background-color: #eeeeee;
-    user-select: none;
-}
-
-.lcolonq-button {
-    position: absolute;
-    height: 90vh;
-    width: 40vw;
-    object-fit: fill;
-    image-rendering: pixelated;
-    border: dotted #888888;
-    margin-top: 5vh;
-    margin-bottom: 5vh;
-    margin-left: 5vw;
-    margin-right: 5vw;
-}
-
-a.lcolonq-button-link :hover {
-    background-color: #cccccc;
-}
-
-a.lcolonq-button-link :active {
-    background-color: #aaaaaa;
-}
-
-#lcolonq-button-green {
-    left: 0px;
-}
-
-#lcolonq-button-red {
-    right: 0px;
-}
-
-/* register */
-#lcolonq-register-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: grid;
-    width: 100%;
-    height: 100%;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr 2fr 1fr;
-}
-
-#lcolonq-register-box {
-    grid-row: 2;
-    grid-column: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-#lcolonq-register-link {
-    width: max-content;
-    text-align: center;
-    display: block;
-    background-color: #6441a5;
-    border-radius: 0.5rem;
-    color: white;
-    background-color: #6441a5;
-    border-radius: 0.5rem;
-    padding: 10px;
-    cursor: pointer;
-    user-select: none;
-}
-
-#lcolonq-register-link:hover {
-    background-color: #533094;
-}
-
-#lcolonq-registered-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: grid;
-    width: 100%;
-    height: 100%;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr 2fr 1fr;
-}
-
-#lcolonq-registered-box {
-    grid-row: 2;
-    grid-column: 2;
-    display: flex;
-    justify-content: center;
-}
-
-.lcolonq-registered-fieldname {
-    font-weight: bold;
-}
-
-#lcolonq-register-error-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: grid;
-    width: 100%;
-    height: 100%;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr 2fr 1fr;
-}
-
-#lcolonq-register-error-box {
-    grid-row: 2;
-    grid-column: 2;
-    display: flex;
-    justify-content: center;
-}
-
-/* menu */
-#lcolonq-menu {
-    overflow-y: scroll;
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-#lcolonq-menu-grid {
-    top: 0px;
-    display: grid;
-    height: 100%;
-    grid-template-rows: max-content 4fr;
-    margin: 0 50px;
-}
-
-#lcolonq-menu-header {
-    grid-row: 1;
-    grid-column: 2;
-    text-align: center;
-    padding-bottom: 1rem;
-}
-
-#lcolonq-menu-header h1 {
-    margin-bottom: 0rem;
-}
-
-#lcolonq-menu-body {
-    grid-row: 2;
-    grid-column: 2;
-}
-
-#lcolonq-menu-body-grid {
-    display: grid;
-    grid-auto-flow: dense;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    grid-auto-rows: minmax(10rem, auto);
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
-#lcolonq-menu-friendzone {
-    grid-column: 1/-1;
-    display: grid;
-    grid-auto-flow: dense;
-    grid-template-columns: subgrid;
-    grid-template-rows: auto; /* first row is just the title */
-    grid-auto-rows: minmax(10rem, auto);
-    gap: 1rem;
-    outline: solid;
-    outline-offset: 2rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-}
-
-#lcolonq-menu-friendzone-title {
-    grid-column: 1/-1;
-    text-align: center;
-    margin-top: 0rem;
-}
-
-.lcolonq-menu-box {
-    border: solid;
-    border-color: black;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 1rem;
-    display: flex;
-    flex-direction: column;
-    user-select: none;
-}
-
-.lcolonq-menu-box:hover {
-    background-color: #eeeeee;
-}
-
-.lcolonq-menu-box h3 {
-    text-align: center;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.lcolonq-menu-box-long {
-    grid-row-end: span 2;
-}
-
-.lcolonq-menu-box textarea {
-    resize: none;
-    margin-top: 1rem;
-    flex: 1;
-}
-
-/* auth */
-.lcolonq-auth {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: grid;
-    width: 100%;
-    height: 100%;
-    grid-template-rows: 1fr 1fr 1fr 1fr;
-    grid-template-columns: 1fr 2fr 1fr;
-}
-
-.lcolonq-auth-box-outer {
-    grid-row: 2;
-    grid-column: 2;
-}
-
-.lcolonq-auth-box {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-}
-
-.lcolonq-auth-box h1 {
-    margin-top: 0rem;
-}
-
-#lcolonq-auth-submit {
-    display: none;
-}
-
-#lcolonq-auth-below {
-    text-align: center;
-}
-
-#lcolonq-auth-register {
-    font-size: 0.7rem;
-    color: CanvasText;
-}
-
-#lcolonq-auth-error {
-    grid-row: 3;
-    grid-column: 2;
-    text-align: center;
-    color: red;
-}
-
-/* greencircle */
-#lcolonq-gc-body {
-    overflow-y: scroll;
-    height: auto;
-}
-
-#lcolonq-gc-hero {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-#lcolonq-gc-spin {
-    height: 60vh;
-    width: 60vh;
-    margin-top: 20vh;
-    margin-bottom: 20vh;
-    display: grid;
-    place-items: center;
-}
-
-#lcolonq-gc-logo {
-    grid-area: 1 / 1;
-    margin-top: 2vh;
-    margin-left: 8vh;
-    height: 100%;
-    image-rendering: pixelated;
-}
-
-#lcolonq-gc-spin-image {
-    grid-area: 1 / 1;
-    animation: spin 40s linear infinite;
-    margin-left: 2vh;
-    height: 250%;
-    width: 250%;
-    user-select: none;
-    pointer-events: none;
-}
-
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@media (max-width : 320px) {
-    #lcolonq-gc-logo {
-        max-width: 60vw;
-        max-height: 60vw;
-    }
-    #lcolonq-gc-spin-image {
-        height: 160%;
-        width: 160%;
-    }
-}
-
-#lcolonq-gc-explainer {
-    text-align: justify;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    height: 100vh;
-    mask-image: linear-gradient(180deg, white 50%, transparent 95%);
-    overflow: hidden;
-}
-
-#lcolonq-gc-explainer h1 {
-    text-align: center;
-    font-size: 1.9rem;
-}
-
-#lcolonq-gc-relentless {
-    text-align: justify;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    text-align: center;
-}
-
-#lcolonq-gc-relentless h1 {
-    font-size: 1.9rem;
-}
-
-#lcolonq-gc-panels {
-    margin-left: 1rem;
-    margin-right: 1rem;
-    margin-bottom: 1rem;
-    display: grid;
-    justify-content: center;
-    grid-template-columns: repeat(auto-fit, 15rem);
-    grid-auto-rows: minmax(10rem, auto);
-    gap: 1rem;
-}
-
-@media (max-width : 320px) {
-    #lcolonq-gc-panels {
-        grid-template-columns: 1fr;
-    }
-}
-
-.lcolonq-gc-panel {
-    border: solid black;
-    color: inherit;
-    text-decoration: none;
-    padding: 1rem;
-    display: none;
-    cursor: pointer;
-}
-
-.lcolonq-gc-panel:hover {
-    background-color: #eeeeee;
-}
-
-.lcolonq-gc-visible {
-    display: block;
-}
-
-.lcolonq-gc-panel h2 {
-    text-align: center;
-}
-
-.lcolonq-gc-now {
-    font-weight: bold;
-    color: red;
-}
-
-/* throwshade */
-#lcolonq-throwshade-body {
-    overflow-y: scroll;
-}
-#lcolonq-throwshade {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    /* background-image: url("./assets/rectangular.jpg"); */
-    background-color: darkgray;
-    background-size: 100% 100%;
-}
-.lcolonq-throwshade-canvas {
-    width: 100%;
-    height: 60%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-}
-.lcolonq-throwshade-canvas canvas {
-    margin: auto;
-    display: block;
-    width: auto;
-    height: 100%;
-    image-rendering: pixelated;
-}
-#lcolonq-throwshade-bottom {
-    flex-grow: 1;
-    height: 40%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    padding-top: 0.6rem;
-}
-#lcolonq-throwshade-bottom-left {
-    flex-grow: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.7rem;
-    padding-right: 1rem;
-}
-#lcolonq-throwshade-textarea {
-    width: 100%;
-    height: 100%;
-    resize: none;
-    border: none;
-    overflow: auto;
-    outline: none;
-    box-shadow: none;
-    color: white;
-    background-color: rgb(0 0 0 / 0.8);
-}
-#lcolonq-throwshade-bottom-right {
-    flex-grow: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.7rem;
-    padding-right: 1rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    max-width: 40%;
-}
-#lcolonq-throwshade-bottom-right img {
-    cursor: pointer;
-    height: 40%;
-}
-#lcolonq-throwshade-current {
-    margin: 0.5rem;
-}
-
-/* gizmo */
-#lcolonq-gizmo-body {
-    width: 100vw;
-    height: 100vh;
-}
-#lcolonq-gizmo {
-    width: 100%;
-    height: 100%;
-}
-#lcolonq-gizmo-top {
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-    right: 0px;
-    top: 0px;
-    color: white;
-    background-color: black;
-    padding-top: 1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 1rem;
-}
-#lcolonq-gizmo-top:hover {
-    opacity: 1;
-}
-#lcolonq-gizmo-bottom {
-    background-color: white;
-    width: 100%;
-    height: 100%;
-}
-#lcolonq-gizmo-contents {
-    border: none;
-    width: 100%;
-    height: 100%;
-}
-
-/* soundboard */
-#lcolonq-soundboard {
-    color: white;
-    background-color: black;
-    overflow-y: scroll;
-    height: auto;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-#lcolonq-soundboard-container {
-    top: 0px;
-    width: min(90vw, 30rem);
-    height: 100%;
-}
-#lcolonq-soundboard-entryframe {
-    overflow: hidden;
-    margin-top: 3rem;
-    margin-bottom: 3rem;
-    margin-left: 2rem;
-    margin-right: 2rem;
-}
-#lcolonq-soundboard-entry {
-    font-size: 30pt;
-    width: calc(100% - 2.2rem);
-    padding: 1rem;
-    color: white;
-    background-color: #111111;
-    border: 0.1rem solid darkgrey;
-}
-#lcolonq-soundboard-entry:focus {
-    outline: none;
-}
-#lcolonq-soundboard-entrytext {
-    white-space: nowrap;
-    color: darkgrey;
-}
-#lcolonq-soundboard-docs {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: dense;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    grid-auto-rows: minmax(10rem, auto);
-    margin-bottom: 1rem;
-}
-.lcolonq-soundboard-doc {
-    border: 0.1rem solid darkgrey;
-    padding: 0.5rem;
-}
-.lcolonq-soundboard-doc h3 {
-    text-align: center;
-    margin-top: 0px;
-    margin-bottom: 0.5rem;
-}
-
-/* advent */
-#lcolonq-advent {
-    overflow-y: scroll;
-    color: white;
-    background-color: black;
-    min-height: 100vh;
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-#lcolonq-advent-container {
-    height: 100%;
-    margin-left: 3rem;
-    margin-right: 3rem;
-}
-.lcolonq-advent-header {
-    text-align: center;
-    padding-bottom: 1rem;
-}
-.lcolonq-advent-header h1 {
-    margin-top: 0rem;
-    margin-bottom: 0rem;
-    font-size: 15vw;
-}
-.lcolonq-advent-subtitle {
-    font-weight: bold;
-}
-.lcolonq-advent-body {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 40rem;
-    text-align: justify;
-}
-.lcolonq-advent-link {
-    text
-}
-.lcolonq-advent-puzzle {
-    display: block;
-    text-decoration: none;
-    color: white;
-    border: solid;
-    border-color: white;
-    margin-top: 1rem;
-    padding: 0.5rem;
-}
-.lcolonq-advent-puzzle:hover {
-    background-color: #111111;
-}
-.lcolonq-advent-puzzle h3 {
-    margin: 0px;
-}
-.lcolonq-advent-puzzle-author {
-    font-weight: bold;
-}
-.lcolonq-advent-puzzle-body {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-.lcolonq-advent-link {
-    text-decoration: none;
-    color: white;
-    font-weight: bold;
-}
-.lcolonq-advent-submit {
-    display: none;
-}