move global styling to separate template

src/template/style.ejs

@@ -0,0 +1,94 @@
+<style>
+body,
+html {
+    margin: 0;
+    padding: 0;
+    max-width: 100vw;
+    overflow-x: hidden;
+    --c-dark: #202124;
+    --c-darkish: #303134;
+    --c-primary: #e8eaed;
+    --c-accent: #C58AF9;
+}
+
+html {
+    padding: 0 0;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: auto minmax(50vw, 650px) auto;
+    background-color: var(--c-dark);
+}
+
+body {
+    grid-column: 2;
+    padding: 15px;
+    margin: 30px 10px;
+
+    display: grid;
+    grid-template-columns: auto;
+    grid-auto-rows: auto;
+    row-gap: 4rem;
+
+    border-radius: 1rem;
+    background-color: var(--c-darkish);
+    color: var(--c-primary);
+
+    font-family: monospace;
+    font-size: 16px;
+    line-height: 1.6em;
+    word-break: normal;
+}
+a {
+    color: var(--c-accent);
+    text-decoration: none;
+}
+code,
+pre {
+    background-color: var(--c-dark);
+    padding: 6px 4px 2px 4px;
+    word-break: break-all;
+}
+pre {
+    overflow-x: scroll;
+}
+input {
+    background-color: var(--c-darkish);
+    border-color: var(--c-dark);
+    color: var(--c-primary);
+    padding: 4px;
+    border-radius: 4px;
+    font-family: monospace;
+}
+input:focus,
+input:focus-visible {
+    border-color: transparent;
+    outline: solid var(--c-accent);
+}
+input[type=number] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+input[type=submit],
+button {
+    border: none;
+    outline: solid 1px var(--c-accent);
+    padding: 10px;
+    vertical-align: top;
+    box-shadow: 3px 3px 1px 1px var(--c-accent);
+    color: var(--c-accent);
+    margin: 0 4px 4px 0;
+    cursor: pointer;
+}
+
+input[type=submit]:focus,
+input[type=submit]:focus-visible,
+input[type=submit]:active,
+button:focus,
+button:focus-visible,
+button:active {
+    border: none;
+    box-shadow: none;
+    margin: 4px 0 0 4px;
+}
+</style>