1 files changed, 168 insertions, 0 deletions
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..f54c149
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,168 @@
+:root {
+	--color-grey: #222222;
+	--text-color: #f9f9f9;
+	--color-purple: #8f60af;
+	--background-img: url(/static/tile.png);
+	--banner-img: url(/static/banner.png);
+}
+
+* {
+	cursor: url("/static/cursor.png"), auto;
+}
+
+body {
+	min-width: 20rem;
+	max-width: 60rem;
+	margin: auto;
+	padding: 1em;
+	color: var(--text-color);
+	background-image: var(--background-img);
+	display: flex;
+	gap: 1em;
+	flex-wrap: wrap;
+	flex-direction: row-reverse;
+}
+
+header {
+	flex-basis: 100%;
+	display: flex;
+	position: relative;
+	justify-content: center;
+}
+
+nav {
+	flex-basis: 10%;
+	flex-grow: 1;
+	display: flex;
+	align-items: start;
+}
+
+main {
+	flex-basis: 70%;
+	flex-grow: 1;
+}
+
+footer {
+	flex-basis: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5em;
+}
+
+a {
+	color: lightblue;
+}
+
+.nav-list {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: flex;
+	gap: 1em;
+	flex-wrap: wrap;
+}
+
+.nav-item {
+	flex-grow: 1;
+	flex-shrink: 1;
+	flex-basis: 0;
+	display: flex;
+}
+
+.box {
+	padding: 1em;
+	border-style: groove;
+	border-width: 0.5em;
+    background-color: var(--color-grey);
+	border-color: var(--color-purple);
+}
+
+.lighten:hover {
+	filter: brightness(110%);
+}
+
+.nav-link {
+	width: 100%;
+	text-align: center;
+	align-content: center;
+	color: var(--color-grey);
+    text-decoration: none;
+	background: var(--color-purple);
+	border-style: outset;
+	border-color: var(--color-purple);
+	padding: 0.5em;
+	font-family: monospace;
+	font-weight: bold;
+	font-size: 1.5em;
+}
+
+.nav-link:hover {
+	filter: brightness(130%);
+}
+
+.buttonbadge {
+	width: 88px;
+	height: 31px;
+	vertical-align: middle;
+}
+
+.codeblock {
+    white-space: pre-wrap;
+    word-break: break-all;
+    background: black;
+    color: lightgreen;
+}
+
+#banner {
+	max-width: 100%;
+	object-fit: contain;
+	image-rendering: pixelated;
+}
+
+#construction {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	height: auto;
+	width: 30%;
+	max-width: 125px;
+	max-height: 100%;
+}
+
+#status {
+	margin: 0;
+    background-color: #8f60af;
+    color: var(--color-grey);
+    border-radius: 1.5em;
+    padding: 0.5em;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    flex-basis: 100%;
+    border-color: var(--color-grey);
+    border-width: 0.1em;
+    border-style: solid;
+}
+
+#status-header {
+    padding: 0.1em 1em;
+    background: white;
+    height: 100%;
+    border-radius: 1em;
+    text-align: center;
+    align-content: center;
+}
+
+#status-body {
+    margin: 0;
+    font-size: 1.2em;
+    color: white;
+	word-break: break-word;
+}
+
+@media only screen and (min-width: 800px) {
+	ul {
+		flex-direction: column;
+	}
+}