refactor: design improvments and fixes

5 files changed, 97 insertions, 102 deletions

diff --git a/css/style-unminified.css b/css/style-unminified.css
index 490cc42..e6cd6d8 100644
--- a/css/style-unminified.css
+++ b/css/style-unminified.css
@@ -118,10 +118,7 @@ table.centered {
 
 th,
 td {
-    padding-top: 0.625rem;
-    padding-bottom: 1.25rem;
-    padding-left: 1.875rem;
-    padding-right: 2.5rem;
+    padding: 1rem 1rem 1rem 1rem;
 }
 
 button {
@@ -157,6 +154,7 @@ ul.no-bullets {
 }
 
 @charset "UTF-8";
+
 .CodeMirror-gutter-filler,
 .CodeMirror-scrollbar-filler {
     background-color: #fff;
@@ -1783,14 +1781,19 @@ span.CodeMirror-selectedtext {
     }
 }
 
-@media (min-width: 55em) {
-    #artlist {
-        column-count: 2;
-    }
-}
-
-@media (min-width: 100em) {
-    #artlist {
-        column-count: 3;
-    }
+#generating-indicator {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    text-align: center;
+    color: white;
+    font-size: 1.75rem;
+    padding-top: 15%
 }
diff --git a/css/style.css b/css/style.css
index 2ccfc90..283256f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1 +1 @@
-body {background: #151515;color: #ccc;max-width: 50rem;margin: auto;padding: 0 1rem;margin-bottom: 31.25rem;font-family: sans-serif;}a {color: #3498db;}a:visited {color: #3498db;}h1 {text-align: center;}h1.forte {text-align: center;font-family: 'Forte', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 2.25rem;padding: 0.625rem;}h2 {color: #ccc;}footer {text-align: center;}img {max-width: 37.5rem;width: 100%;margin: auto;display: block;}img.theme-select {max-width: 12.5rem;width: 100%;margin: auto;display: block;}code {overflow-wrap: break-word;color: lime;}img[alt="BTC logo"], img[alt="XMR Logo"] {max-width: 1em;max-height: 1em;display: inline;}div.centered {text-align: center;}p.centered {text-align: center;}h2.centered {text-align: center;}h3.centered {text-align: center;}h4.centered {text-align: center;}input.center-block {text-align: center;display: block;margin-right: auto;margin-left: auto;}.CodeMirror, .CodeMirror-scroll {max-height: 18.75rem;}.CodeMirror-fullscreen.CodeMirror {max-height: none;}.CodeMirror-fullscreen .CodeMirror-scroll {max-height: none;}pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;resize: both;overflow: auto;}table.centered {margin-left: auto;margin-right: auto;}th, td {padding-top: 0.625rem;padding-bottom: 1.25rem;padding-left: 1.875rem;padding-right: 2.5rem;}button {background-color: #303030;border: lightblue 1px solid;padding: 0.3125rem 0.625rem;color: lightblue;text-decoration: none;border-radius: 0.1875rem;margin: 0.625rem 0;font-size: 1rem;font-family: monospace;text-align: center;}.responsive-video {max-width: 100%;max-height: 100%;height: auto;}.video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}ul.no-bullets {list-style-type: none;font-family: monospace;}@charset "UTF-8";.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {background-color: #fff;}.CodeMirror-gutters {border-right: 1px solid #ddd;background-color: #f7f7f7;white-space: nowrap;}.CodeMirror-linenumber {padding: 0 0.1875rem 0 0.3125rem;min-width: 1.25rem;text-align: right;color: #999;white-space: nowrap;}.CodeMirror-guttermarker {color: #000;}.CodeMirror-guttermarker-subtle {color: #999;}.CodeMirror-cursor {border-left: 1px solid #000;border-right: none;width: 0;}.CodeMirror div.CodeMirror-secondarycursor {border-left: 1px solid silver;}.cm-fat-cursor .CodeMirror-cursor {width: auto;border: 0 !important;background: #7e7;}.cm-fat-cursor div.CodeMirror-cursors {z-index: 1;}.cm-animate-fat-cursor {width: auto;border: 0;-webkit-animation: blink 1.06s steps(1) infinite;animation: blink 1.06s steps(1) infinite;background-color: #7e7;}@-webkit-keyframes blink {50% {background-color: transparent;}}@keyframes blink {50% {background-color: transparent;}}.cm-tab {display: inline-block;text-decoration: inherit;}.CodeMirror-rulers {position: absolute;left: 0;right: 0;top: -3.125rem;bottom: -1.25rem;overflow: hidden;}.CodeMirror-ruler {border-left: 1px solid #ccc;top: 0;bottom: 0;position: absolute;}.CodeMirror, .CodeMirror-scroll {position: relative;min-height: 18.75rem;}.cm-s-default .cm-header {color: #00f;}.cm-s-default .cm-quote {color: #090;}.cm-negative {color: #d44;}.cm-positive {color: #292;}.cm-header, .cm-strong {font-weight: 700;}.cm-em {font-style: italic;}.cm-link {text-decoration: underline;}.CodeMirror .CodeMirror-code .cm-strikethrough, .cm-strikethrough {text-decoration: line-through;}.cm-s-default .cm-keyword {color: #708;}.cm-s-default .cm-atom {color: #219;}.cm-s-default .cm-number {color: #164;}.cm-s-default .cm-def {color: #00f;}.cm-s-default .cm-variable-2 {color: #05a;}.cm-s-default .cm-variable-3 {color: #085;}.cm-s-default .cm-comment {color: #a50;}.cm-s-default .cm-string {color: #a11;}.cm-s-default .cm-string-2 {color: #f50;}.cm-s-default .cm-meta, .cm-s-default .cm-qualifier {color: #555;}.cm-s-default .cm-builtin {color: #30a;}.cm-s-default .cm-bracket {color: #997;}.cm-s-default .cm-tag {color: #170;}.cm-s-default .cm-attribute {color: #00c;}.cm-s-default .cm-hr {color: #999;}.cm-s-default .cm-link {color: #00c;}.cm-invalidchar, .cm-s-default .cm-error {color: red;}.CodeMirror-composing {border-bottom: 0.125rem solid;}div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}.CodeMirror-matchingtag {background: rgba(255, 150, 0, 0.3);}.CodeMirror-activeline-background {background: #e8f2ff;}.CodeMirror {position: relative;overflow: hidden;background: #fff;}.CodeMirror-scroll {overflow: scroll !important;height: 100%;outline: 0;position: relative;}.CodeMirror-sizer {position: relative;border-right: 1.875rem solid transparent;}.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {position: absolute;z-index: 6;display: none;}.CodeMirror-vscrollbar {right: 0;top: 0;overflow-x: hidden;overflow-y: scroll;}.CodeMirror-hscrollbar {bottom: 0;left: 0;overflow-y: hidden;overflow-x: scroll;}.CodeMirror-scrollbar-filler {right: 0;bottom: 0;}.CodeMirror-gutter-filler {left: 0;bottom: 0;}.CodeMirror-gutters {position: absolute;left: 0;top: 0;min-height: 100%;z-index: 3;}.CodeMirror-gutter {white-space: normal;height: 100%;display: inline-block;vertical-align: top;margin-bottom: -1.875rem;}.CodeMirror-gutter-wrapper {position: absolute;z-index: 4;background: 0 0 !important;border: none !important;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.CodeMirror-gutter-background {position: absolute;top: 0;bottom: 0;z-index: 4;}.CodeMirror-gutter-elt {position: absolute;cursor: default;z-index: 4;}.CodeMirror-lines {cursor: text;min-height: 1px;}.CodeMirror pre {border-radius: 0;border-width: 0;background: 0 0;font-family: inherit;font-size: inherit;margin: 0;white-space: pre;word-wrap: normal;line-height: inherit;color: inherit;z-index: 2;position: relative;overflow: visible;-webkit-tap-highlight-color: transparent;-webkit-font-variant-ligatures: contextual;font-variant-ligatures: contextual;}.CodeMirror-wrap pre {word-wrap: break-word;white-space: pre-wrap;word-break: normal;}.CodeMirror-linebackground {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}.CodeMirror-linewidget {position: relative;z-index: 2;overflow: auto;}.CodeMirror-code {outline: 0;}.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {box-sizing: content-box;}.CodeMirror-measure {position: absolute;width: 100%;height: 0;overflow: hidden;visibility: hidden;}.CodeMirror-cursor {position: absolute;pointer-events: none;}.CodeMirror-measure pre {position: static;}div.CodeMirror-cursors {visibility: hidden;position: relative;z-index: 3;}.CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors {visibility: visible;}.CodeMirror-selected {background: #d9d9d9;}.CodeMirror-focused .CodeMirror-selected {background: #d7d4f0;}.CodeMirror-crosshair {cursor: crosshair;}.CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {background: #d7d4f0;}.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection {background: #d7d4f0;}.cm-searching {background: #ffa;background: rgba(255, 255, 0, 0.4);}.cm-force-border {padding-right: 0.00625rem;}@media print {.CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after {content: '';}span.CodeMirror-selectedtext {background: 0 0;}.CodeMirror {background-color: #444;border: 0.0625rem solid #555;border-bottom-left-radius: 0.1875rem;border-bottom-right-radius: 0.1875rem;color: #aaa;font-family: inherit;font-size: 1.125rem;height: auto;line-height: 1.5;padding: 0.875rem;z-index: 1;}.CodeMirror-scroll {margin-bottom: -2rem;margin-right: -2rem;padding-bottom: 2rem;}.CodeMirror-fullscreen {background-color: #444;border: 0;border-top: 0.0625rem solid #555;bottom: 0;height: auto;left: 0;position: fixed !important;right: 0;top: 3.625rem;z-index: 9;}.CodeMirror-sided {width: 50% !important;}.CodeMirror .CodeMirror-placeholder {color: #777;}.CodeMirror-cursor {border-left-color: #aaa;}.CodeMirror pre, .CodeMirror-lines {padding: 0;}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection, .CodeMirror-selected {background-color: rgba(255, 255, 255, 0.1);}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection, .CodeMirror-selected {background-color: rgba(255, 255, 255, 0.1);}.CodeMirror .CodeMirror-code .cm-attribute, .CodeMirror .CodeMirror-code .cm-tag {color: #95bf40;}.CodeMirror .CodeMirror-code .cm-string {color: #777;}.CodeMirror .CodeMirror-code .cm-link {color: #ffd500;}.CodeMirror .CodeMirror-code .cm-formatting-code, .CodeMirror .CodeMirror-code .cm-formatting-code-block, .CodeMirror .CodeMirror-code .cm-formatting-em, .CodeMirror .CodeMirror-code .cm-formatting-header, .CodeMirror .CodeMirror-code .cm-formatting-strikethrough, .CodeMirror .CodeMirror-code .cm-formatting-strong, .CodeMirror .CodeMirror-code .cm-hr, .CodeMirror .CodeMirror-code .cm-quote, .CodeMirror .CodeMirror-code .cm-url {color: #777;}.CodeMirror .CodeMirror-code .cm-header-1, .CodeMirror .CodeMirror-code .cm-header-2, .CodeMirror .CodeMirror-code .cm-header-3, .CodeMirror .CodeMirror-code .cm-header-4, .CodeMirror .CodeMirror-code .cm-header-5, .CodeMirror .CodeMirror-code .cm-header-6 {line-height: 2;}.CodeMirror .CodeMirror-code .cm-header-1 {font-size: 2rem;}.CodeMirror .CodeMirror-code .cm-header-2 {font-size: 1.625rem;}.CodeMirror .CodeMirror-code .cm-header-3 {font-size: 1.5rem;}.CodeMirror .CodeMirror-code .cm-header-4 {font-size: 1.375rem;}.CodeMirror .CodeMirror-code .cm-header-5 {font-size: 1.25rem;}.CodeMirror .CodeMirror-code .cm-header-6 {font-size: 1.125rem;}.CodeMirror .CodeMirror-code .cm-header, .CodeMirror .CodeMirror-code .cm-strong {font-weight: 600;}.CodeMirror .CodeMirror-code .cm-comment {background-color: rgba(255, 255, 255, 0.05);font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size: 0.875rem;padding: 0.375rem 0 0.25rem;}.CodeMirror .CodeMirror-code span.CodeMirror-selectedtext.cm-comment {background-color: rgba(255, 255, 255, 0.05);}.editor-preview {height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 2;}.editor-preview-side {border: 0;border-left: 0.0625rem solid #555;border-top: 0.0625rem solid #555;bottom: 0;position: fixed;right: 0;top: 3.625rem;width: 50%;z-index: 9;}.editor-preview, .editor-preview-side {background-color: #444;box-sizing: border-box;color: #aaa;display: none;font-family: inherit;font-size: 1.125rem;line-height: 1.5;overflow: auto;padding: 0 0.875rem 0.875rem;}.editor-preview pre, .editor-preview-side pre {background-color: rgba(255, 255, 255, 0.05);font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size: 0.875rem;line-height: 1.2;margin-top: 0.875rem;overflow: auto;-webkit-overflow-scrolling: touch;padding: 0.875rem;}.editor-preview pre code, .editor-preview-side pre code {background-color: transparent;font-size: 0.875rem;padding: 0;}.editor-preview-active, .editor-preview-active-side {display: block;}.editor-preview table, .editor-preview-side table {background-color: #444;border: 0;border-collapse: collapse;border-spacing: 0;width: 100%;}.editor-preview table caption, .editor-preview-side table caption {caption-side: bottom;color: #777;padding: 0.4375rem;text-align: left;}.editor-preview table td, .editor-preview table th, .editor-preview-side table td, .editor-preview-side table th {border: 0;border-bottom: 0.0625rem solid #555;padding: 0.4375rem;text-align: left;}.editor-preview table th, .editor-preview-side table th {background-color: rgba(255, 255, 255, 0.05);font-weight: 600;}.editor-preview audio:not([controls]), .editor-preview-side audio:not([controls]) {display: none;height: 0;}.editor-preview img, .editor-preview-side img {max-width: 100%;vertical-align: middle;}.editor-preview audio, .editor-preview video, .editor-preview-side audio, .editor-preview-side video {width: 100%;}.editor-toolbar {background-color: #444;border: 0.0625rem solid #555;border-bottom: 0;border-top-left-radius: 0.1875rem;border-top-right-radius: 0.1875rem;font-size: 1.125rem;padding: 0 0.875rem;position: relative;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.editor-toolbar::after, .editor-toolbar::before {content: ' ';display: block;height: 0.0625rem;}.editor-toolbar::before {margin-bottom: 0.4375rem;}.editor-toolbar::after {margin-top: 0.4375rem;}.editor-toolbar a {border: 0.0625rem solid transparent;border-radius: 0.1875rem;color: #777 !important;cursor: pointer;display: inline-block;font-size: 80%;height: 1.875rem;margin: 0;text-align: center;text-decoration: none !important;width: 1.875rem;}.editor-toolbar a.active, .editor-toolbar a:hover {border-color: #555;color: #aaa !important;}.editor-toolbar a::before {line-height: 1.875rem;}.editor-toolbar a.fa-header-x::after {bottom: -0.25em;font-family: inherit;font-size: 80%;line-height: 0;position: relative;vertical-align: baseline;}.editor-toolbar a.fa-header-1::after {content: "1";}.editor-toolbar a.fa-header-2::after {content: "2";}.editor-toolbar a.fa-header-3::after {content: "3";}.editor-toolbar a.fa-header-bigger::after {content: "▲";}.editor-toolbar a.fa-header-smaller::after {content: "▼";}.editor-toolbar i.separator {border-right: 0.0625rem solid #555;color: transparent;display: inline-block;margin: 0 0.4375rem;text-indent: -0.625rem;width: 0;}.editor-toolbar:hover a {color: #aaa !important;}.editor-toolbar.fullscreen {background-color: #444;border: 0;box-sizing: border-box;height: 3.625rem;left: 0;overflow-x: auto;overflow-y: hidden;padding-bottom: 0.875rem;padding-top: 0.875rem;position: fixed;top: 0;white-space: nowrap;width: 100%;z-index: 9;}.editor-toolbar.fullscreen::after, .editor-toolbar.fullscreen::before {height: 3.625rem;left: 0;margin: 0;padding: 0;position: fixed;top: 0;width: 1.25rem;}.editor-toolbar.fullscreen::before {background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);}.editor-toolbar.fullscreen::after {background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);}@media only screen and (max-width: 43.75rem) {.editor-toolbar a.no-mobile {display: none;}}.editor-toolbar.disabled-for-preview a:not(.no-disable) {background-color: #444;border-color: transparent;pointer-events: none;text-shadow: inherit;}.editor-statusbar {color: #777;font-family: inherit;font-size: 80%;padding: 0.4375rem 0.875rem;text-align: right;}.editor-statusbar span {display: inline-block;margin-left: 1em;}.editor-statusbar .lines::before {content: 'lines: ';}.editor-statusbar .words::before {content: 'words: ';}.editor-statusbar .characters::before {content: 'characters: ';}@media (prefers-color-scheme: light) {.CodeMirror {color: #000;}.CodeMirror-lines {padding: 0.25rem 0;}.CodeMirror pre {padding: 0 0.25rem;}.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {background-color: #fff;}.CodeMirror-gutters {border-right: 0.0625rem solid #ddd;background-color: #f7f7f7;white-space: nowrap;}.CodeMirror-linenumber {padding: 0 0.1875rem 0 0.3125rem;min-width: 1.25rem;text-align: right;color: #999;white-space: nowrap;}.CodeMirror-guttermarker {color: #000;}.CodeMirror-guttermarker-subtle {color: #999;}.CodeMirror-cursor {border-left: 0.0625rem solid #000;border-right: none;width: 0;}.CodeMirror div.CodeMirror-secondarycursor {border-left: 0.0625rem solid silver;}.cm-fat-cursor .CodeMirror-cursor {width: auto;border: 0 !important;background: #7e7;}.cm-fat-cursor div.CodeMirror-cursors {z-index: 1;}.cm-animate-fat-cursor {width: auto;border: 0;-webkit-animation: blink 1.06s steps(1) infinite;-moz-animation: blink 1.06s steps(1) infinite;animation: blink 1.06s steps(1) infinite;background-color: #7e7;}@-moz-keyframes blink {50% {background-color: transparent;}}@-webkit-keyframes blink {50% {background-color: transparent;}}@keyframes blink {50% {background-color: transparent;}}.cm-tab {display: inline-block;text-decoration: inherit;}.CodeMirror-ruler {border-left: 0.0625rem solid #ccc;position: absolute;}.cm-s-default .cm-header {color: #00f;}.cm-s-default .cm-quote {color: #090;}.cm-negative {color: #d44;}.cm-positive {color: #292;}.cm-header, .cm-strong {font-weight: 700;}.cm-em {font-style: italic;}.cm-link {text-decoration: underline;}.cm-strikethrough {text-decoration: line-through;}.cm-s-default .cm-keyword {color: #708;}.cm-s-default .cm-atom {color: #219;}.cm-s-default .cm-number {color: #164;}.cm-s-default .cm-def {color: #00f;}.cm-s-default .cm-variable-2 {color: #05a;}.cm-s-default .cm-variable-3 {color: #085;}.cm-s-default .cm-comment {color: #a50;}.cm-s-default .cm-string {color: #a11;}.cm-s-default .cm-string-2 {color: #f50;}.cm-s-default .cm-meta, .cm-s-default .cm-qualifier {color: #555;}.cm-s-default .cm-builtin {color: #30a;}.cm-s-default .cm-bracket {color: #997;}.cm-s-default .cm-tag {color: #170;}.cm-s-default .cm-attribute {color: #00c;}.cm-s-default .cm-hr {color: #999;}.cm-s-default .cm-link {color: #00c;}.cm-invalidchar, .cm-s-default .cm-error {color: red;}.CodeMirror-composing {border-bottom: 0.125rem solid;}div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}.CodeMirror-matchingtag {background: rgba(255, 150, 0, 0.3);}.CodeMirror-activeline-background {background: #e8f2ff;}.CodeMirror {position: relative;overflow: hidden;background: #fff;}.CodeMirror-scroll {overflow: scroll !important;margin-bottom: -1.875rem;margin-right: -1.875rem;padding-bottom: 1.875rem;height: 100%;outline: 0;position: relative;}.CodeMirror-sizer {position: relative;border-right: 1.875rem solid transparent;}.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {position: absolute;z-index: 6;display: none;}.CodeMirror-vscrollbar {right: 0;top: 0;overflow-x: hidden;overflow-y: scroll;}.CodeMirror-hscrollbar {bottom: 0;left: 0;overflow-y: hidden;overflow-x: scroll;}.CodeMirror-scrollbar-filler {right: 0;bottom: 0;}.CodeMirror-gutter-filler {left: 0;bottom: 0;}.CodeMirror-gutters {position: absolute;left: 0;top: 0;min-height: 100%;z-index: 3;}.CodeMirror-gutter {white-space: normal;height: 100%;display: inline-block;vertical-align: top;margin-bottom: -1.875rem;}.CodeMirror-gutter-wrapper {position: absolute;z-index: 4;background: 0 0 !important;border: none !important;-webkit-user-select: none;-moz-user-select: none;user-select: none;}.CodeMirror-gutter-background {position: absolute;top: 0;bottom: 0;z-index: 4;}.CodeMirror-gutter-elt {position: absolute;cursor: default;z-index: 4;}.CodeMirror-lines {cursor: text;min-height: 1px;}.CodeMirror pre {-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;border-width: 0;background: 0 0;font-family: inherit;font-size: inherit;margin: 0;white-space: pre;word-wrap: normal;line-height: inherit;color: inherit;z-index: 2;position: relative;overflow: visible;-webkit-tap-highlight-color: transparent;-webkit-font-variant-ligatures: none;font-variant-ligatures: none;}.CodeMirror-wrap pre {word-wrap: break-word;white-space: pre-wrap;word-break: normal;}.CodeMirror-linebackground {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}.CodeMirror-linewidget {position: relative;z-index: 2;overflow: auto;}.CodeMirror-code {outline: 0;}.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {-moz-box-sizing: content-box;box-sizing: content-box;}.CodeMirror-measure {position: absolute;width: 100%;height: 0;overflow: hidden;visibility: hidden;}.CodeMirror-cursor {position: absolute;}.CodeMirror-measure pre {position: static;}div.CodeMirror-cursors {visibility: hidden;position: relative;z-index: 3;}.CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors {visibility: visible;}.CodeMirror-selected {background: #d9d9d9;}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {background: #d7d4f0;}.CodeMirror-crosshair {cursor: crosshair;}.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection {background: #d7d4f0;}.cm-searching {background: #ffa;background: rgba(255, 255, 0, 0.4);}.cm-force-border {padding-right: 0.00625rem;}@media print {.CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after {content: '';}span.CodeMirror-selectedtext {background: 0 0;}.CodeMirror {height: auto;min-height: 18.75rem;border: 0.0625rem solid #ddd;border-bottom-left-radius: 0.25rem;border-bottom-right-radius: 0.25rem;padding: 0.625rem;font: inherit;z-index: 1;}.CodeMirror-scroll {min-height: 18.75rem;}.CodeMirror-fullscreen {background: #fff;position: fixed !important;top: 3.125rem;left: 0;right: 0;bottom: 0;height: auto;z-index: 9;}.CodeMirror-sided {width: 50% !important;}.editor-toolbar {background-color: #fff;position: relative;opacity: 0.6;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;padding: 0 0.625rem;border-top: 0.0625rem solid #bbb;border-left: 0.0625rem solid #bbb;border-right: 0.0625rem solid #bbb;border-top-left-radius: 0.25rem;border-top-right-radius: 0.25rem;}.editor-toolbar:after, .editor-toolbar:before {display: block;content: ' ';height: 0.0625rem;}.editor-toolbar:before {margin-bottom: 0.5rem;}.editor-toolbar:after {margin-top: 0.5rem;}.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover {opacity: 0.8;}.editor-toolbar.fullscreen {width: 100%;height: 3.125rem;overflow-x: auto;overflow-y: hidden;white-space: nowrap;padding-top: 0.625rem;padding-bottom: 0.625rem;box-sizing: border-box;background: #fff;border: 0;position: fixed;top: 0;left: 0;opacity: 1;z-index: 9;}.editor-toolbar.fullscreen::before {width: 1.25rem;height: 3.125rem;background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);position: fixed;top: 0;left: 0;margin: 0;padding: 0;}.editor-toolbar.fullscreen::after {width: 1.25rem;height: 3.125rem;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);position: fixed;top: 0;right: 0;margin: 0;padding: 0;}@media only screen and (max-width: 43.75rem) {.editor-toolbar a.no-mobile {display: none;}}.editor-toolbar.disabled-for-preview a:not(.no-disable) {pointer-events: none;background: #fff;border-color: transparent;text-shadow: inherit;}.editor-statusbar {padding: 0.5rem 0.625rem;font-size: 0.75rem;color: #959694;text-align: right;}.editor-statusbar span {display: inline-block;min-width: 4em;margin-left: 1em;}.editor-preview, .editor-preview-side {padding: 0.625rem;background: #fafafa;overflow: auto;display: none;box-sizing: border-box;}.editor-statusbar .lines:before {content: 'lines: ';}.editor-statusbar .words:before {content: 'words: ';}.editor-statusbar .characters:before {content: 'characters: ';}.editor-preview {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 7;}.editor-preview-side {position: fixed;bottom: 0;width: 50%;top: 3.125rem;right: 0;z-index: 9;border: 0.0625rem solid #ddd;}.editor-preview-active, .editor-preview-active-side {display: block;}.editor-preview-side>p, .editor-preview>p {margin-top: 0;}.editor-preview pre, .editor-preview-side pre {background: #eee;margin-bottom: 0.625rem;}.editor-preview table td, .editor-preview table th, .editor-preview-side table td, .editor-preview-side table th {border: 0.0625rem solid #ddd;padding: 0.3125rem;}.CodeMirror .CodeMirror-code .cm-tag {color: #63a35c;}.CodeMirror .CodeMirror-code .cm-attribute {color: #795da3;}.CodeMirror .CodeMirror-code .cm-string {color: #183691;}.CodeMirror .CodeMirror-selected {background: #d9d9d9;}.CodeMirror .CodeMirror-code .cm-header-1 {font-size: 2rem;line-height: 2rem;}.CodeMirror .CodeMirror-code .cm-header-2 {font-size: 1.6rem;line-height: 1.6rem;}.CodeMirror .CodeMirror-code .cm-header-3 {font-size: 1.25rem;line-height: 1.25rem;}.CodeMirror .CodeMirror-code .cm-header-4 {font-size: 1.1rem;line-height: 1.1rem;}.CodeMirror .CodeMirror-code .cm-comment {background: rgba(0, 0, 0, 0.05);border-radius: 0.125rem;}.CodeMirror .CodeMirror-code .cm-link {color: #7f8c8d;}.CodeMirror .CodeMirror-code .cm-url {color: #aab2b3;}.CodeMirror .CodeMirror-code .cm-strikethrough {text-decoration: line-through;}.CodeMirror .CodeMirror-placeholder {opacity: 0.5;}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {background: rgba(255, 0, 0, 0.15);}button {background-color: #D0E5FF;border: none;padding: 0.3125rem 0.625rem;color: #11427E;text-decoration: none;border-radius: 0.1875rem;margin: 0.625rem 0;font-size: 1rem;font-family: monospace;text-align: center;}body {background: whitesmoke;color: black;}a {color: #0061E0;}a:visited {color: #0061E0;}h2 {color: black;}code {color: forestgreen;}}@media print {a[href] {text-decoration: none;color: black;}}@media (min-width: 55em) {#artlist {column-count: 2;}}@media (min-width: 100em) {#artlist {column-count: 3;}}
+body {background: #151515;color: #ccc;max-width: 50rem;margin: auto;padding: 0 1rem;margin-bottom: 31.25rem;font-family: sans-serif;}a {color: #3498db;}a:visited {color: #3498db;}h1 {text-align: center;}h1.forte {text-align: center;font-family: 'Forte', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size: 2.25rem;padding: 0.625rem;}h2 {color: #ccc;}footer {text-align: center;}img {max-width: 37.5rem;width: 100%;margin: auto;display: block;}img.theme-select {max-width: 12.5rem;width: 100%;margin: auto;display: block;}code {overflow-wrap: break-word;color: lime;}img[alt="BTC logo"], img[alt="XMR Logo"] {max-width: 1em;max-height: 1em;display: inline;}div.centered {text-align: center;}p.centered {text-align: center;}h2.centered {text-align: center;}h3.centered {text-align: center;}h4.centered {text-align: center;}input.center-block {text-align: center;display: block;margin-right: auto;margin-left: auto;}.CodeMirror, .CodeMirror-scroll {max-height: 18.75rem;}.CodeMirror-fullscreen.CodeMirror {max-height: none;}.CodeMirror-fullscreen .CodeMirror-scroll {max-height: none;}pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;resize: both;overflow: auto;}table.centered {margin-left: auto;margin-right: auto;}th, td {padding: 1rem 1rem 1rem 1rem;}button {background-color: #303030;border: lightblue 1px solid;padding: 0.3125rem 0.625rem;color: lightblue;text-decoration: none;border-radius: 0.1875rem;margin: 0.625rem 0;font-size: 1rem;font-family: monospace;text-align: center;}.responsive-video {max-width: 100%;max-height: 100%;height: auto;}.video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}ul.no-bullets {list-style-type: none;font-family: monospace;}@charset "UTF-8";.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {background-color: #fff;}.CodeMirror-gutters {border-right: 1px solid #ddd;background-color: #f7f7f7;white-space: nowrap;}.CodeMirror-linenumber {padding: 0 0.1875rem 0 0.3125rem;min-width: 1.25rem;text-align: right;color: #999;white-space: nowrap;}.CodeMirror-guttermarker {color: #000;}.CodeMirror-guttermarker-subtle {color: #999;}.CodeMirror-cursor {border-left: 1px solid #000;border-right: none;width: 0;}.CodeMirror div.CodeMirror-secondarycursor {border-left: 1px solid silver;}.cm-fat-cursor .CodeMirror-cursor {width: auto;border: 0 !important;background: #7e7;}.cm-fat-cursor div.CodeMirror-cursors {z-index: 1;}.cm-animate-fat-cursor {width: auto;border: 0;-webkit-animation: blink 1.06s steps(1) infinite;animation: blink 1.06s steps(1) infinite;background-color: #7e7;}@-webkit-keyframes blink {50% {background-color: transparent;}}@keyframes blink {50% {background-color: transparent;}}.cm-tab {display: inline-block;text-decoration: inherit;}.CodeMirror-rulers {position: absolute;left: 0;right: 0;top: -3.125rem;bottom: -1.25rem;overflow: hidden;}.CodeMirror-ruler {border-left: 1px solid #ccc;top: 0;bottom: 0;position: absolute;}.CodeMirror, .CodeMirror-scroll {position: relative;min-height: 18.75rem;}.cm-s-default .cm-header {color: #00f;}.cm-s-default .cm-quote {color: #090;}.cm-negative {color: #d44;}.cm-positive {color: #292;}.cm-header, .cm-strong {font-weight: 700;}.cm-em {font-style: italic;}.cm-link {text-decoration: underline;}.CodeMirror .CodeMirror-code .cm-strikethrough, .cm-strikethrough {text-decoration: line-through;}.cm-s-default .cm-keyword {color: #708;}.cm-s-default .cm-atom {color: #219;}.cm-s-default .cm-number {color: #164;}.cm-s-default .cm-def {color: #00f;}.cm-s-default .cm-variable-2 {color: #05a;}.cm-s-default .cm-variable-3 {color: #085;}.cm-s-default .cm-comment {color: #a50;}.cm-s-default .cm-string {color: #a11;}.cm-s-default .cm-string-2 {color: #f50;}.cm-s-default .cm-meta, .cm-s-default .cm-qualifier {color: #555;}.cm-s-default .cm-builtin {color: #30a;}.cm-s-default .cm-bracket {color: #997;}.cm-s-default .cm-tag {color: #170;}.cm-s-default .cm-attribute {color: #00c;}.cm-s-default .cm-hr {color: #999;}.cm-s-default .cm-link {color: #00c;}.cm-invalidchar, .cm-s-default .cm-error {color: red;}.CodeMirror-composing {border-bottom: 0.125rem solid;}div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}.CodeMirror-matchingtag {background: rgba(255, 150, 0, 0.3);}.CodeMirror-activeline-background {background: #e8f2ff;}.CodeMirror {position: relative;overflow: hidden;background: #fff;}.CodeMirror-scroll {overflow: scroll !important;height: 100%;outline: 0;position: relative;}.CodeMirror-sizer {position: relative;border-right: 1.875rem solid transparent;}.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {position: absolute;z-index: 6;display: none;}.CodeMirror-vscrollbar {right: 0;top: 0;overflow-x: hidden;overflow-y: scroll;}.CodeMirror-hscrollbar {bottom: 0;left: 0;overflow-y: hidden;overflow-x: scroll;}.CodeMirror-scrollbar-filler {right: 0;bottom: 0;}.CodeMirror-gutter-filler {left: 0;bottom: 0;}.CodeMirror-gutters {position: absolute;left: 0;top: 0;min-height: 100%;z-index: 3;}.CodeMirror-gutter {white-space: normal;height: 100%;display: inline-block;vertical-align: top;margin-bottom: -1.875rem;}.CodeMirror-gutter-wrapper {position: absolute;z-index: 4;background: 0 0 !important;border: none !important;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.CodeMirror-gutter-background {position: absolute;top: 0;bottom: 0;z-index: 4;}.CodeMirror-gutter-elt {position: absolute;cursor: default;z-index: 4;}.CodeMirror-lines {cursor: text;min-height: 1px;}.CodeMirror pre {border-radius: 0;border-width: 0;background: 0 0;font-family: inherit;font-size: inherit;margin: 0;white-space: pre;word-wrap: normal;line-height: inherit;color: inherit;z-index: 2;position: relative;overflow: visible;-webkit-tap-highlight-color: transparent;-webkit-font-variant-ligatures: contextual;font-variant-ligatures: contextual;}.CodeMirror-wrap pre {word-wrap: break-word;white-space: pre-wrap;word-break: normal;}.CodeMirror-linebackground {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}.CodeMirror-linewidget {position: relative;z-index: 2;overflow: auto;}.CodeMirror-code {outline: 0;}.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {box-sizing: content-box;}.CodeMirror-measure {position: absolute;width: 100%;height: 0;overflow: hidden;visibility: hidden;}.CodeMirror-cursor {position: absolute;pointer-events: none;}.CodeMirror-measure pre {position: static;}div.CodeMirror-cursors {visibility: hidden;position: relative;z-index: 3;}.CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors {visibility: visible;}.CodeMirror-selected {background: #d9d9d9;}.CodeMirror-focused .CodeMirror-selected {background: #d7d4f0;}.CodeMirror-crosshair {cursor: crosshair;}.CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {background: #d7d4f0;}.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection {background: #d7d4f0;}.cm-searching {background: #ffa;background: rgba(255, 255, 0, 0.4);}.cm-force-border {padding-right: 0.00625rem;}@media print {.CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after {content: '';}span.CodeMirror-selectedtext {background: 0 0;}.CodeMirror {background-color: #444;border: 0.0625rem solid #555;border-bottom-left-radius: 0.1875rem;border-bottom-right-radius: 0.1875rem;color: #aaa;font-family: inherit;font-size: 1.125rem;height: auto;line-height: 1.5;padding: 0.875rem;z-index: 1;}.CodeMirror-scroll {margin-bottom: -2rem;margin-right: -2rem;padding-bottom: 2rem;}.CodeMirror-fullscreen {background-color: #444;border: 0;border-top: 0.0625rem solid #555;bottom: 0;height: auto;left: 0;position: fixed !important;right: 0;top: 3.625rem;z-index: 9;}.CodeMirror-sided {width: 50% !important;}.CodeMirror .CodeMirror-placeholder {color: #777;}.CodeMirror-cursor {border-left-color: #aaa;}.CodeMirror pre, .CodeMirror-lines {padding: 0;}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection, .CodeMirror-selected {background-color: rgba(255, 255, 255, 0.1);}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection, .CodeMirror-selected {background-color: rgba(255, 255, 255, 0.1);}.CodeMirror .CodeMirror-code .cm-attribute, .CodeMirror .CodeMirror-code .cm-tag {color: #95bf40;}.CodeMirror .CodeMirror-code .cm-string {color: #777;}.CodeMirror .CodeMirror-code .cm-link {color: #ffd500;}.CodeMirror .CodeMirror-code .cm-formatting-code, .CodeMirror .CodeMirror-code .cm-formatting-code-block, .CodeMirror .CodeMirror-code .cm-formatting-em, .CodeMirror .CodeMirror-code .cm-formatting-header, .CodeMirror .CodeMirror-code .cm-formatting-strikethrough, .CodeMirror .CodeMirror-code .cm-formatting-strong, .CodeMirror .CodeMirror-code .cm-hr, .CodeMirror .CodeMirror-code .cm-quote, .CodeMirror .CodeMirror-code .cm-url {color: #777;}.CodeMirror .CodeMirror-code .cm-header-1, .CodeMirror .CodeMirror-code .cm-header-2, .CodeMirror .CodeMirror-code .cm-header-3, .CodeMirror .CodeMirror-code .cm-header-4, .CodeMirror .CodeMirror-code .cm-header-5, .CodeMirror .CodeMirror-code .cm-header-6 {line-height: 2;}.CodeMirror .CodeMirror-code .cm-header-1 {font-size: 2rem;}.CodeMirror .CodeMirror-code .cm-header-2 {font-size: 1.625rem;}.CodeMirror .CodeMirror-code .cm-header-3 {font-size: 1.5rem;}.CodeMirror .CodeMirror-code .cm-header-4 {font-size: 1.375rem;}.CodeMirror .CodeMirror-code .cm-header-5 {font-size: 1.25rem;}.CodeMirror .CodeMirror-code .cm-header-6 {font-size: 1.125rem;}.CodeMirror .CodeMirror-code .cm-header, .CodeMirror .CodeMirror-code .cm-strong {font-weight: 600;}.CodeMirror .CodeMirror-code .cm-comment {background-color: rgba(255, 255, 255, 0.05);font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size: 0.875rem;padding: 0.375rem 0 0.25rem;}.CodeMirror .CodeMirror-code span.CodeMirror-selectedtext.cm-comment {background-color: rgba(255, 255, 255, 0.05);}.editor-preview {height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 2;}.editor-preview-side {border: 0;border-left: 0.0625rem solid #555;border-top: 0.0625rem solid #555;bottom: 0;position: fixed;right: 0;top: 3.625rem;width: 50%;z-index: 9;}.editor-preview, .editor-preview-side {background-color: #444;box-sizing: border-box;color: #aaa;display: none;font-family: inherit;font-size: 1.125rem;line-height: 1.5;overflow: auto;padding: 0 0.875rem 0.875rem;}.editor-preview pre, .editor-preview-side pre {background-color: rgba(255, 255, 255, 0.05);font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size: 0.875rem;line-height: 1.2;margin-top: 0.875rem;overflow: auto;-webkit-overflow-scrolling: touch;padding: 0.875rem;}.editor-preview pre code, .editor-preview-side pre code {background-color: transparent;font-size: 0.875rem;padding: 0;}.editor-preview-active, .editor-preview-active-side {display: block;}.editor-preview table, .editor-preview-side table {background-color: #444;border: 0;border-collapse: collapse;border-spacing: 0;width: 100%;}.editor-preview table caption, .editor-preview-side table caption {caption-side: bottom;color: #777;padding: 0.4375rem;text-align: left;}.editor-preview table td, .editor-preview table th, .editor-preview-side table td, .editor-preview-side table th {border: 0;border-bottom: 0.0625rem solid #555;padding: 0.4375rem;text-align: left;}.editor-preview table th, .editor-preview-side table th {background-color: rgba(255, 255, 255, 0.05);font-weight: 600;}.editor-preview audio:not([controls]), .editor-preview-side audio:not([controls]) {display: none;height: 0;}.editor-preview img, .editor-preview-side img {max-width: 100%;vertical-align: middle;}.editor-preview audio, .editor-preview video, .editor-preview-side audio, .editor-preview-side video {width: 100%;}.editor-toolbar {background-color: #444;border: 0.0625rem solid #555;border-bottom: 0;border-top-left-radius: 0.1875rem;border-top-right-radius: 0.1875rem;font-size: 1.125rem;padding: 0 0.875rem;position: relative;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.editor-toolbar::after, .editor-toolbar::before {content: ' ';display: block;height: 0.0625rem;}.editor-toolbar::before {margin-bottom: 0.4375rem;}.editor-toolbar::after {margin-top: 0.4375rem;}.editor-toolbar a {border: 0.0625rem solid transparent;border-radius: 0.1875rem;color: #777 !important;cursor: pointer;display: inline-block;font-size: 80%;height: 1.875rem;margin: 0;text-align: center;text-decoration: none !important;width: 1.875rem;}.editor-toolbar a.active, .editor-toolbar a:hover {border-color: #555;color: #aaa !important;}.editor-toolbar a::before {line-height: 1.875rem;}.editor-toolbar a.fa-header-x::after {bottom: -0.25em;font-family: inherit;font-size: 80%;line-height: 0;position: relative;vertical-align: baseline;}.editor-toolbar a.fa-header-1::after {content: "1";}.editor-toolbar a.fa-header-2::after {content: "2";}.editor-toolbar a.fa-header-3::after {content: "3";}.editor-toolbar a.fa-header-bigger::after {content: "▲";}.editor-toolbar a.fa-header-smaller::after {content: "▼";}.editor-toolbar i.separator {border-right: 0.0625rem solid #555;color: transparent;display: inline-block;margin: 0 0.4375rem;text-indent: -0.625rem;width: 0;}.editor-toolbar:hover a {color: #aaa !important;}.editor-toolbar.fullscreen {background-color: #444;border: 0;box-sizing: border-box;height: 3.625rem;left: 0;overflow-x: auto;overflow-y: hidden;padding-bottom: 0.875rem;padding-top: 0.875rem;position: fixed;top: 0;white-space: nowrap;width: 100%;z-index: 9;}.editor-toolbar.fullscreen::after, .editor-toolbar.fullscreen::before {height: 3.625rem;left: 0;margin: 0;padding: 0;position: fixed;top: 0;width: 1.25rem;}.editor-toolbar.fullscreen::before {background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);}.editor-toolbar.fullscreen::after {background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);}@media only screen and (max-width: 43.75rem) {.editor-toolbar a.no-mobile {display: none;}}.editor-toolbar.disabled-for-preview a:not(.no-disable) {background-color: #444;border-color: transparent;pointer-events: none;text-shadow: inherit;}.editor-statusbar {color: #777;font-family: inherit;font-size: 80%;padding: 0.4375rem 0.875rem;text-align: right;}.editor-statusbar span {display: inline-block;margin-left: 1em;}.editor-statusbar .lines::before {content: 'lines: ';}.editor-statusbar .words::before {content: 'words: ';}.editor-statusbar .characters::before {content: 'characters: ';}@media (prefers-color-scheme: light) {.CodeMirror {color: #000;}.CodeMirror-lines {padding: 0.25rem 0;}.CodeMirror pre {padding: 0 0.25rem;}.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {background-color: #fff;}.CodeMirror-gutters {border-right: 0.0625rem solid #ddd;background-color: #f7f7f7;white-space: nowrap;}.CodeMirror-linenumber {padding: 0 0.1875rem 0 0.3125rem;min-width: 1.25rem;text-align: right;color: #999;white-space: nowrap;}.CodeMirror-guttermarker {color: #000;}.CodeMirror-guttermarker-subtle {color: #999;}.CodeMirror-cursor {border-left: 0.0625rem solid #000;border-right: none;width: 0;}.CodeMirror div.CodeMirror-secondarycursor {border-left: 0.0625rem solid silver;}.cm-fat-cursor .CodeMirror-cursor {width: auto;border: 0 !important;background: #7e7;}.cm-fat-cursor div.CodeMirror-cursors {z-index: 1;}.cm-animate-fat-cursor {width: auto;border: 0;-webkit-animation: blink 1.06s steps(1) infinite;-moz-animation: blink 1.06s steps(1) infinite;animation: blink 1.06s steps(1) infinite;background-color: #7e7;}@-moz-keyframes blink {50% {background-color: transparent;}}@-webkit-keyframes blink {50% {background-color: transparent;}}@keyframes blink {50% {background-color: transparent;}}.cm-tab {display: inline-block;text-decoration: inherit;}.CodeMirror-ruler {border-left: 0.0625rem solid #ccc;position: absolute;}.cm-s-default .cm-header {color: #00f;}.cm-s-default .cm-quote {color: #090;}.cm-negative {color: #d44;}.cm-positive {color: #292;}.cm-header, .cm-strong {font-weight: 700;}.cm-em {font-style: italic;}.cm-link {text-decoration: underline;}.cm-strikethrough {text-decoration: line-through;}.cm-s-default .cm-keyword {color: #708;}.cm-s-default .cm-atom {color: #219;}.cm-s-default .cm-number {color: #164;}.cm-s-default .cm-def {color: #00f;}.cm-s-default .cm-variable-2 {color: #05a;}.cm-s-default .cm-variable-3 {color: #085;}.cm-s-default .cm-comment {color: #a50;}.cm-s-default .cm-string {color: #a11;}.cm-s-default .cm-string-2 {color: #f50;}.cm-s-default .cm-meta, .cm-s-default .cm-qualifier {color: #555;}.cm-s-default .cm-builtin {color: #30a;}.cm-s-default .cm-bracket {color: #997;}.cm-s-default .cm-tag {color: #170;}.cm-s-default .cm-attribute {color: #00c;}.cm-s-default .cm-hr {color: #999;}.cm-s-default .cm-link {color: #00c;}.cm-invalidchar, .cm-s-default .cm-error {color: red;}.CodeMirror-composing {border-bottom: 0.125rem solid;}div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}.CodeMirror-matchingtag {background: rgba(255, 150, 0, 0.3);}.CodeMirror-activeline-background {background: #e8f2ff;}.CodeMirror {position: relative;overflow: hidden;background: #fff;}.CodeMirror-scroll {overflow: scroll !important;margin-bottom: -1.875rem;margin-right: -1.875rem;padding-bottom: 1.875rem;height: 100%;outline: 0;position: relative;}.CodeMirror-sizer {position: relative;border-right: 1.875rem solid transparent;}.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {position: absolute;z-index: 6;display: none;}.CodeMirror-vscrollbar {right: 0;top: 0;overflow-x: hidden;overflow-y: scroll;}.CodeMirror-hscrollbar {bottom: 0;left: 0;overflow-y: hidden;overflow-x: scroll;}.CodeMirror-scrollbar-filler {right: 0;bottom: 0;}.CodeMirror-gutter-filler {left: 0;bottom: 0;}.CodeMirror-gutters {position: absolute;left: 0;top: 0;min-height: 100%;z-index: 3;}.CodeMirror-gutter {white-space: normal;height: 100%;display: inline-block;vertical-align: top;margin-bottom: -1.875rem;}.CodeMirror-gutter-wrapper {position: absolute;z-index: 4;background: 0 0 !important;border: none !important;-webkit-user-select: none;-moz-user-select: none;user-select: none;}.CodeMirror-gutter-background {position: absolute;top: 0;bottom: 0;z-index: 4;}.CodeMirror-gutter-elt {position: absolute;cursor: default;z-index: 4;}.CodeMirror-lines {cursor: text;min-height: 1px;}.CodeMirror pre {-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;border-width: 0;background: 0 0;font-family: inherit;font-size: inherit;margin: 0;white-space: pre;word-wrap: normal;line-height: inherit;color: inherit;z-index: 2;position: relative;overflow: visible;-webkit-tap-highlight-color: transparent;-webkit-font-variant-ligatures: none;font-variant-ligatures: none;}.CodeMirror-wrap pre {word-wrap: break-word;white-space: pre-wrap;word-break: normal;}.CodeMirror-linebackground {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}.CodeMirror-linewidget {position: relative;z-index: 2;overflow: auto;}.CodeMirror-code {outline: 0;}.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {-moz-box-sizing: content-box;box-sizing: content-box;}.CodeMirror-measure {position: absolute;width: 100%;height: 0;overflow: hidden;visibility: hidden;}.CodeMirror-cursor {position: absolute;}.CodeMirror-measure pre {position: static;}div.CodeMirror-cursors {visibility: hidden;position: relative;z-index: 3;}.CodeMirror-focused div.CodeMirror-cursors, div.CodeMirror-dragcursors {visibility: visible;}.CodeMirror-selected {background: #d9d9d9;}.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {background: #d7d4f0;}.CodeMirror-crosshair {cursor: crosshair;}.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection {background: #d7d4f0;}.cm-searching {background: #ffa;background: rgba(255, 255, 0, 0.4);}.cm-force-border {padding-right: 0.00625rem;}@media print {.CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after {content: '';}span.CodeMirror-selectedtext {background: 0 0;}.CodeMirror {height: auto;min-height: 18.75rem;border: 0.0625rem solid #ddd;border-bottom-left-radius: 0.25rem;border-bottom-right-radius: 0.25rem;padding: 0.625rem;font: inherit;z-index: 1;}.CodeMirror-scroll {min-height: 18.75rem;}.CodeMirror-fullscreen {background: #fff;position: fixed !important;top: 3.125rem;left: 0;right: 0;bottom: 0;height: auto;z-index: 9;}.CodeMirror-sided {width: 50% !important;}.editor-toolbar {background-color: #fff;position: relative;opacity: 0.6;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;padding: 0 0.625rem;border-top: 0.0625rem solid #bbb;border-left: 0.0625rem solid #bbb;border-right: 0.0625rem solid #bbb;border-top-left-radius: 0.25rem;border-top-right-radius: 0.25rem;}.editor-toolbar:after, .editor-toolbar:before {display: block;content: ' ';height: 0.0625rem;}.editor-toolbar:before {margin-bottom: 0.5rem;}.editor-toolbar:after {margin-top: 0.5rem;}.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover {opacity: 0.8;}.editor-toolbar.fullscreen {width: 100%;height: 3.125rem;overflow-x: auto;overflow-y: hidden;white-space: nowrap;padding-top: 0.625rem;padding-bottom: 0.625rem;box-sizing: border-box;background: #fff;border: 0;position: fixed;top: 0;left: 0;opacity: 1;z-index: 9;}.editor-toolbar.fullscreen::before {width: 1.25rem;height: 3.125rem;background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);position: fixed;top: 0;left: 0;margin: 0;padding: 0;}.editor-toolbar.fullscreen::after {width: 1.25rem;height: 3.125rem;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);position: fixed;top: 0;right: 0;margin: 0;padding: 0;}@media only screen and (max-width: 43.75rem) {.editor-toolbar a.no-mobile {display: none;}}.editor-toolbar.disabled-for-preview a:not(.no-disable) {pointer-events: none;background: #fff;border-color: transparent;text-shadow: inherit;}.editor-statusbar {padding: 0.5rem 0.625rem;font-size: 0.75rem;color: #959694;text-align: right;}.editor-statusbar span {display: inline-block;min-width: 4em;margin-left: 1em;}.editor-preview, .editor-preview-side {padding: 0.625rem;background: #fafafa;overflow: auto;display: none;box-sizing: border-box;}.editor-statusbar .lines:before {content: 'lines: ';}.editor-statusbar .words:before {content: 'words: ';}.editor-statusbar .characters:before {content: 'characters: ';}.editor-preview {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 7;}.editor-preview-side {position: fixed;bottom: 0;width: 50%;top: 3.125rem;right: 0;z-index: 9;border: 0.0625rem solid #ddd;}.editor-preview-active, .editor-preview-active-side {display: block;}.editor-preview-side>p, .editor-preview>p {margin-top: 0;}.editor-preview pre, .editor-preview-side pre {background: #eee;margin-bottom: 0.625rem;}.editor-preview table td, .editor-preview table th, .editor-preview-side table td, .editor-preview-side table th {border: 0.0625rem solid #ddd;padding: 0.3125rem;}.CodeMirror .CodeMirror-code .cm-tag {color: #63a35c;}.CodeMirror .CodeMirror-code .cm-attribute {color: #795da3;}.CodeMirror .CodeMirror-code .cm-string {color: #183691;}.CodeMirror .CodeMirror-selected {background: #d9d9d9;}.CodeMirror .CodeMirror-code .cm-header-1 {font-size: 2rem;line-height: 2rem;}.CodeMirror .CodeMirror-code .cm-header-2 {font-size: 1.6rem;line-height: 1.6rem;}.CodeMirror .CodeMirror-code .cm-header-3 {font-size: 1.25rem;line-height: 1.25rem;}.CodeMirror .CodeMirror-code .cm-header-4 {font-size: 1.1rem;line-height: 1.1rem;}.CodeMirror .CodeMirror-code .cm-comment {background: rgba(0, 0, 0, 0.05);border-radius: 0.125rem;}.CodeMirror .CodeMirror-code .cm-link {color: #7f8c8d;}.CodeMirror .CodeMirror-code .cm-url {color: #aab2b3;}.CodeMirror .CodeMirror-code .cm-strikethrough {text-decoration: line-through;}.CodeMirror .CodeMirror-placeholder {opacity: 0.5;}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {background: rgba(255, 0, 0, 0.15);}button {background-color: #D0E5FF;border: none;padding: 0.3125rem 0.625rem;color: #11427E;text-decoration: none;border-radius: 0.1875rem;margin: 0.625rem 0;font-size: 1rem;font-family: monospace;text-align: center;}body {background: whitesmoke;color: black;}a {color: #0061E0;}a:visited {color: #0061E0;}h2 {color: black;}code {color: forestgreen;}}@media print {a[href] {text-decoration: none;color: black;}}#generating-indicator {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;max-width: 100%;max-height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 1000;text-align: center;color: white;font-size: 1.75rem;padding-top: 15% }
diff --git a/includes/nav-header.php b/includes/nav-header.php
index 3f2b97a..0f8fc8b 100644
--- a/includes/nav-header.php
+++ b/includes/nav-header.php
@@ -1,8 +1,8 @@
 <div class="centered">
    <h2>
-      <a style="text-decoration: none;" href="../index.php">🏠 home</a> &nbsp;
-      <a style="text-decoration: none;" href="../info.php">🗂️ info</a> &nbsp;
-      <a style="text-decoration: none;" href="../licenses.php">⚖️ licenses</a> &nbsp;
+      <a style="text-decoration: none;" href="../index.php">🏠 home</a>
+      <a style="text-decoration: none;" href="../info.php">🗂️ info</a>
+      <a style="text-decoration: none;" href="../licenses.php">⚖️ licenses</a>
    </h2>
    <hr>
 
diff --git a/includes/procrastislides-banner.php b/includes/procrastislides-banner.php
index e69a821..980852e 100644
--- a/includes/procrastislides-banner.php
+++ b/includes/procrastislides-banner.php
@@ -1,4 +1,4 @@
 <div class=banner>
-    <h1>📑 procrastiSlides v0.02 p2 🎬</h1>
+    <h1>📑 procrastiSlides v0.02 p3 🎬</h1>
     <hr />
 </div>
diff --git a/index.php b/index.php
index 3e1e18b..abe50d1 100644
--- a/index.php
+++ b/index.php
@@ -1,17 +1,22 @@
 <?php
-session_start(); ?>
+session_start();
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['compile'])) {
+    $_SESSION['user-input'] = htmlspecialchars($_POST['user-input'], ENT_QUOTES, 'UTF-8');
+}
+?>
 <!DOCTYPE html>
-<html lang=en>
+<html lang="en">
 
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv='cache-control' content='no-cache'>
-    <meta http-equiv='expires' content='0'>
-    <meta http-equiv='pragma' content='no-cache'>
+    <meta charset="UTF-8">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>procrastiSlides: great for procratinators who need to get a presentation out, quick! 😆</title>
     <meta name="description" content="create .pdf presentations from markdown! 🤗 procrastiSlides is a simple presentation(s) site that respects your dark mode setting and has responsive web design.
-         non-intruisive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
+        non-intrusive ads, no tracking, nothing but quick slides from plain text/markdown. 🏫 try copy and pasting your school notes! that might even work 😂">
     <?php include "includes/link-tags-in-head.php"; ?>
     <meta name="color-scheme" content="light dark">
 </head>
@@ -21,94 +26,71 @@ session_start(); ?>
     include "includes/procrastislides-banner.php";
     include "includes/main-info.php";
     include "includes/nav-header.php";
-    ?>
-    <?php if (isset($_POST["compile"])) {
-        $_SESSION["user-input"] = $_POST["user-input"]; ?>
+
+    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['compile'])) { ?>
         <div class="centered">
             <h3>🎨 please select your presentation theme 🎭</h3>
-            <form class="" action="download.php" method="post">
+            <form id="theme-form" action="download.php" method="post" onsubmit="showGeneratingIndicator()">
                 <table class="centered">
-                    <th>
-                        <h2>preview</h2>
-                    </th>
-                    <th>
-                        <h2>select</h2>
-                    </th>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/90sMakeUpCommercial.webp" alt="90sMakeUpCommercial"><br></td>
-                        <td><button type="submit" name="90sMakeUpCommercial">90sMakeUpCommercial</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/chicagoOlives.webp" alt="chicagoOlives"><br></td>
-                        <td><button type="submit" name="chicagoOlives">chicagoOlives</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/cleanMetropolis.webp" alt="cleanMetropolis"><br></td>
-                        <td><button type="submit" name="cleanMetropolis">cleanMetropolis</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/earlyCupertino.webp" alt="earlyCupertino"><br></td>
-                        <td><button type="submit" name="earlyCupertino">earlyCupertino</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/ohioCustard.webp" alt="ohioCustard"><br></td>
-                        <td><button type="submit" name="ohioCustard">ohioCustard</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/raleighAroundMe.webp" alt="raleighAroundMe"><br></td>
-                        <td><button type="submit" name="raleighAroundMe">raleighAroundMe</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/defaultIsKing.webp" alt="defaultIsKing"><br></td>
-                        <td><button type="submit" name="defaultIsKing">defaultIsKing</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/cuppertinoIsh.webp" alt="Cuppertino-Ish"><br></td>
-                        <td><button type="submit" name="cuppertinoIsh">cuppertinoIsh</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/lazyProfessor.webp" alt="lazyProfessor"><br></td>
-                        <td><button type="submit" name="lazyProfessor">lazyProfessor</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/redmond2003.webp" alt="redmond2003"><br></td>
-                        <td><button type="submit" name="redmond2003">redmond2003</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/strengthInNumbers.webp" alt="strengthInNumbers"><br></td>
-                        <td><button type="submit" name="strengthInNumbers">strengthInNumbers</button></td>
-                    </tr>
-                    <tr>
-                        <td><img loading="lazy" class=theme-select src="img/thatMagazine.webp" alt="thatMagazine"><br></td>
-                        <td><button type="submit" name="thatMagazine">thatMagazine</button></td>
-                    </tr>
+                    <thead>
+                        <tr>
+                            <th>
+                                <h2>preview</h2>
+                            </th>
+                            <th>
+                                <h2>select</h2>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php
+                        $themes = [
+                            '90sMakeUpCommercial',
+                            'chicagoOlives',
+                            'cleanMetropolis',
+                            'earlyCupertino',
+                            'ohioCustard',
+                            'raleighAroundMe',
+                            'defaultIsKing',
+                            'cuppertinoIsh',
+                            'lazyProfessor',
+                            'redmond2003',
+                            'strengthInNumbers',
+                            'thatMagazine'
+                        ];
+
+                        foreach ($themes as $theme) { ?>
+                            <tr>
+                                <td><img loading="lazy" class="theme-select" src="img/<?= $theme ?>.webp" alt="<?= $theme ?>"><br></td>
+                                <td><button type="submit" name="<?= $theme ?>"><?= $theme ?></button></td>
+                            </tr>
+                        <?php } ?>
+                    </tbody>
                 </table>
+                <div id="generating-indicator" style="display: none;">
+                    <p>📊</p>
+                    <p>generating presentation...</p>
+                    <p>please wait.</p>
+                </div>
             </form>
         </div>
         <br>
-    <?php
-    } ?>
-    <?php if (!isset($_POST["compile"])) { ?>
+    <?php } else { ?>
         <div>
-            <br>
-            <details>
-                <summary style="font-size: 1.125rem;"><strong>← expand to use the markdown editor 📝</strong></summary>
-                <p>
-                    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
-                <form class="" action="index.php" method="post">
-                    <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION["user-input"]; ?></textarea>
-                    <div class="centered">
-                        <button type="submit" name="compile">create presentation</button>
-                    </div>
-                </form>
+            <h2 class="centered">markdown goes here:</h2>
+            <form action="index.php" method="post">
+                <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+                <textarea id="user-input" name="user-input" rows="8" cols="80"><?php echo $_SESSION['user-input'] ?? ''; ?></textarea>
                 <script type="text/javascript">
                     var simplemde = new SimpleMDE({
                         element: document.getElementById("user-input")
                     });
                 </script>
-                </p>
-            </details>
-            <br>
+                <div class="centered">
+                    <button type="submit" name="compile">create presentation</button>
+                </div>
+            </form>
+            <br><br>
             <details>
                 <summary style="font-size: 1.125rem;"><strong>← expand for a brief <emphasis>"how-to"</emphasis> 📖</strong></summary>
                 <p>
@@ -137,7 +119,7 @@ session_start(); ?>
                     </ul>
                 </ul>
                 <br>
-                <p class="centered"> <i>It's highly recommended that you use markdown lists rather than plain text lists</i> </p><br>
+                <p class="centered"><i>It's highly recommended that you use markdown lists rather than plain text lists</i></p><br>
                 </p>
             </details>
             <br>
@@ -156,6 +138,16 @@ session_start(); ?>
     <footer>
         <?php include "includes/nav-footer.php"; ?>
     </footer>
+
+    <script type="text/javascript">
+        function showGeneratingIndicator() {
+            document.getElementById('generating-indicator').style.display = 'block';
+            setTimeout(function() {
+                document.getElementById('theme-form').submit();
+            }, 200);
+            return false;
+        }
+    </script>
 </body>
 
 </html>