diff --git a/static/zettoit-style b/static/zettoit-style
deleted file mode 160000
index e027a9f..0000000
--- a/static/zettoit-style
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit e027a9f53a602127925ca6e6bd7c9fe825f2a04e
diff --git a/static/zettoit.css b/static/zettoit.css
new file mode 100644
index 0000000..738c1c9
--- /dev/null
+++ b/static/zettoit.css
@@ -0,0 +1,171 @@
+/*
+ * GENERAL
+ */
+:root {
+ --s0: 1px;
+ --s1: 2px;
+ --s2: 4px;
+ --s3: 8px;
+ --s4: 16px;
+}
+html {
+ font-family: monospace;
+ font-size: 16px;
+ line-height: calc(1em + var(--spacing-2));
+}
+body {
+ min-height: 100vh;
+ max-width: 100%;
+ background-color: black;
+ color: #eceff4;
+ margin: 0;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+main {
+ border: 1px solid white;
+ padding: var(--s3);
+ max-width: calc(100% - 2*var(--s3) - 2*var(--s0));
+ display: flex;
+ flex-direction: column;
+ gap: var(--s4);
+
+}
+
+.watermark {
+ position: fixed;
+ right: 0.25rem;
+ bottom: 0.25rem;
+ filter: invert();
+ height: 1em;
+ color: white;
+}
+.watermark img {
+ height: 100%;
+}
+
+/*
+ * LAYOUT
+ */
+.container {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+
+.centered {
+ text-align: center;
+}
+
+/*
+ * TYPOGRAPHY
+ */
+h1,h2,h3,h4,h5,h6,p {
+ margin: 0;
+}
+h1 {
+ font-size: 1.6rem;
+}
+h2 {
+ font-size: 1.5rem;
+}
+h3 {
+ font-size: 1.4rem;
+}
+h4 {
+ font-size: 1.3rem;
+}
+h5 {
+ font-size: 1.2rem;
+}
+h6 {
+ font-size: 1.1rem;
+}
+small {
+ font-size: 0.9rem;
+}
+
+/*
+ * COMPONENTS
+ */
+pre {
+ border-width: var(--s0) var(--s0) var(--s0) var(--s2);
+ border-color: #e5e9f0;
+ border-style: solid;
+ padding-left: var(--s1);
+ font-size: 0.8rem;
+ overflow-x: auto;
+ margin: 0px;
+}
+
+article {
+ border: var(--s0) solid #e5e9f0;
+ padding: var(--s3);
+}
+
+button {
+ background-color: white;
+ color: black;
+ border: 1px solid white;
+ font-weight: bold;
+ padding: 0.5em;
+ font-size: 1.1em;
+ cursor: pointer;
+ display: block;
+ width: 100%;
+}
+button:active, input[type="file"]::file-selector-button:active {
+ background-color: black;
+ color: white;
+}
+
+/*
+ * Form
+ */
+form{
+ display: flex;
+ flex-direction: column;
+ gap: var(--s3);
+}
+
+input[type="file"] {
+ display: block;
+ border: 1px solid white;
+ font-weight: bold;
+ width: calc(100% - 2px);
+ cursor: pointer;
+}
+input[type="file"]::file-selector-button {
+ background-color: white;
+ color: black;
+ font-weight: bold;
+ border: none;
+ padding: 0.5em;
+ cursor: pointer;
+}
+
diff --git a/static/zettoit.svg b/static/zettoit.svg
new file mode 100644
index 0000000..f77f51e
--- /dev/null
+++ b/static/zettoit.svg
@@ -0,0 +1,60 @@
+
+
+
+
diff --git a/templates/index.stpl b/templates/index.stpl
index 2258164..1b0ca86 100644
--- a/templates/index.stpl
+++ b/templates/index.stpl
@@ -3,7 +3,8 @@
zettoIT ARS
-
+
+
@@ -39,7 +40,7 @@ correct = 0
- 
+ 