init

index.css

@@ -0,0 +1,80 @@
+:root {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: rgb(44, 41, 53);
+}
+
+section {
+    max-width: 90vw;
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    background: rgb(255, 255, 255);
+    border: solid rgb(200, 200, 200) 2px;
+    border-radius: 10px;
+    min-height: 500px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-align: center;
+    margin: 10px;
+    margin-bottom: 0;
+    height: 40px;
+    line-height: 40px;
+}
+
+p {
+    margin: 10px;
+}
+
+
+.message {
+    position: relative;
+    margin-bottom: -1024px;
+    bottom: 1024px;
+    width: 1024px;
+    height: 1024px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.message span {
+    display: block;
+    text-align: center;
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    font-size: 50px;
+}
+
+.ui-text {
+    white-space: pre-wrap;
+    font-weight: bold;
+    padding: 10px;
+}
+
+#canvas {
+    width: 768px;
+    height: 768px;
+    /*image-rendering: pixelated;*/
+    background: rgb(63, 63, 71);
+}
+
+section#main {
+    width: 1024px;
+}
+
+@media (max-width: 1920px) {
+    #canvas {
+        width: min(512px, 90vw);
+        height: min(512px, 90vw);
+    }
+}