diff --git a/config.ini b/config.ini
index 760e0cd..f8a090e 100644
--- a/config.ini
+++ b/config.ini
@@ -5,7 +5,7 @@ base_url = https://ab.21x9.org
 timezone = Europe/Berlin
 mail = abgame@21x9.org
 separator_char = ;
-theme = auto
+theme = dark
 
 [i18n]
 lang = de
diff --git a/static/css/auto.css b/static/css/base.css
similarity index 72%
rename from static/css/auto.css
rename to static/css/base.css
index c806cb9..2f4bc80 100644
--- a/static/css/auto.css
+++ b/static/css/base.css
@@ -1,12 +1,12 @@
 body {
     font-family: 'Courier New', Courier, monospace;
-    background-color: #333333;
+    background-color: var(--bg);
 }
 
 html,
 body {
-    border-color: #E7E5E2;
-    color: #E7E5E2;
+    border-color: var(--br);
+    color: var(--fg);
 }
 
 hr {
@@ -14,7 +14,7 @@ hr {
 }
 
 a {
-    color: #8FA3A9;
+    color: var(--fg-lnk);
 }
 
 #header {
@@ -23,8 +23,8 @@ a {
     width: 100%;
     padding-top: 25px;
     padding-bottom: 25px;
-    background-color: #8FA3A9;
-    color: #243233;
+    background-color: var(--bg-header);
+    color: var(--fg-header);
     font-weight: bolder;
     font-size: large;
 }
@@ -48,7 +48,7 @@ a {
     align-items: center;
     display: flex;
     padding: 5px;
-    background-color: #89A6C0;
+    background-color: var(--bg-ab);
 }
 
 .a {
@@ -58,8 +58,8 @@ a {
     padding: 25px;
     border-radius: 10px;
     border: 1px solid transparent;
-    background-color: #F7D214;
-    color: #243233;
+    background-color: var(--bg-a);
+    color: var(--fg-a);
     font-weight: bold;
     text-align: left;
     font-family: 'Courier New', Courier, monospace;
@@ -78,8 +78,8 @@ a {
     padding: 25px;
     border-radius: 10px;
     border: 1px solid transparent;
-    background-color: #243233;
-    color: #F7D214;
+    background-color: var(--bg-b);
+    color: var(--fg-b);
     font-weight: bold;
     text-align: left;
     font-family: 'Courier New', Courier, monospace;
@@ -103,9 +103,9 @@ input[type="radio"] {
 }
 
 .ab input:checked+label {
-    background-color: #B3472B;
-    border: 1px solid #000000;
-    color: #E7E5E2;
+    background-color: var(--bg-ab-chkd);
+    border: 1px solid var(--br-ab-chkd);
+    color: var(--fg-ab-chkd);
 }
 
 .separator {
@@ -119,7 +119,7 @@ input[type="radio"] {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #243233;
+    color: var(--fg-sep);
 }
 
 #footer {
@@ -134,7 +134,7 @@ input[type="radio"] {
     border-radius: 10px;
     padding-top: 25px;
     padding-bottom: 25px;
-    color: #F7D214;
+    color: var(--fg-que);
     font-weight: bold;
 }
 
@@ -146,8 +146,8 @@ input[type="radio"] {
     border-radius: 10px;
     padding-top: 25px;
     padding-bottom: 25px;
-    background-color: #8FA3A9;
-    color: #243233;
+    background-color: var(--bg-nxt);
+    color: var(--fg-nxt);
     font-weight: bold;
     font-family: 'Courier New', Courier, monospace;
     font-size: medium;
@@ -198,51 +198,51 @@ input[type="radio"] {
 
 @media (prefers-color-scheme: dark) {
     body {
-        background-color: #181a1b !important;
+        background-color: var(--bg) !important;
     }
 
     #header {
-        background-color: rgb(74, 91, 96) !important;
-        color: rgb(205, 200, 194) !important;
+        background-color: var(--bg-header) !important;
+        color: var(--fg-header) !important;
     }
 
     .a {
         border-color: transparent !important;
-        background-color: rgb(143, 120, 5) !important;
-        color: rgb(29, 40, 41) !important;
+        background-color: var(--bg-a) !important;
+        color: var(--fg-a) !important;
     }
 
     .b {
         border-color: transparent !important;
-        background-color: rgb(29, 40, 41) !important;
-        color: rgb(248, 214, 41) !important;
+        background-color: var(--bg-b) !important;
+        color: var(--fg-b) !important;
     }
 
     .ab {
-        background-color: rgb(56, 81, 104) !important;
+        background-color: var(--bg-ab) !important;
     }
 
     .ab input:checked+label {
-        background-color: rgb(143, 57, 34) !important;
-        border-color: rgb(140, 130, 115) !important;
-        color: rgb(215, 212, 207) !important;
+        background-color: var(--bg-ab-chkd) !important;
+        border-color: var(--br-ab-chkd) !important;
+        color: var(--fg-ab-chkd) !important;
     }
 
     .separator {
-        color: rgb(205, 200, 194);
+        color: var(--fg-sep);
     }
 
     #next {
         border-color: initial !important;
-        background-color: rgb(74, 91, 96) !important;
-        color: rgb(205, 200, 194) !important;
+        background-color: var(--bg-nxt) !important;
+        color: var(--fg-nxt) !important;
     }
 
     #questions {
-        color: rgb(248, 214, 41) !important;
+        color: var(--fg-que) !important;
     }
 
     a {
-        color: rgb(169, 162, 151) !important;
+        color: var(--fg-lnk) !important;
     }
-}
\ No newline at end of file
+}
diff --git a/static/css/dark.css b/static/css/dark.css
index d6e8f89..793f219 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -1,48 +1,24 @@
-body {
-    background-color: #181a1b !important;
-}
+:root {
+    --bg: #243233;
+    --fg: #E7E5E2;
+    --br: #E7E5E2;
+    --fg-lnk: rgb(169, 162, 151);
 
-#header {
-    background-color: rgb(74, 91, 96) !important;
-    color: rgb(205, 200, 194) !important;
-}
+    --bg-header: rgb(74, 91, 96);
+    --fg-header: rgb(205, 200, 194);
+    --bg-ab: rgb(56, 81, 104);
 
-.a {
-    border-color: transparent !important;
-    background-color: rgb(143, 120, 5) !important;
-    color: rgb(29, 40, 41) !important;
-}
+    --bg-a: rgb(143, 120, 5);
+    --fg-a: rgb(29, 40, 41);
+    --bg-b: rgb(29, 40, 41);
+    --fg-b: rgb(248, 214, 41);
 
-.b {
-    border-color: transparent !important;
-    background-color: rgb(29, 40, 41) !important;
-    color: rgb(248, 214, 41) !important;
-}
+    --bg-ab-chkd: rgb(143, 57, 34);
+    --fg-ab-chkd: rgb(215, 212, 207);
+    --br-ab-chkd: rgb(140, 130, 115);
 
-.ab {
-    background-color: rgb(56, 81, 104) !important;
+    --fg-sep: rgb(205, 200, 194);
+    --fg-que: rgb(248, 214, 41);
+    --bg-nxt: rgb(74, 91, 96)
+    --fg-nxt: rgb(205, 200, 194);
 }
-
-.ab input:checked+label {
-    background-color: rgb(143, 57, 34) !important;
-    border-color: rgb(140, 130, 115) !important;
-    color: rgb(215, 212, 207) !important;
-}
-
-.separator {
-    color: rgb(205, 200, 194);
-}
-
-#next {
-    border-color: initial !important;
-    background-color: rgb(74, 91, 96) !important;
-    color: rgb(205, 200, 194) !important;
-}
-
-#questions {
-    color: rgb(248, 214, 41) !important;
-}
-
-a {
-    color: rgb(169, 162, 151) !important;
-}
\ No newline at end of file
diff --git a/static/css/light.css b/static/css/light.css
index 349b2b6..e6dbae5 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -1,197 +1,24 @@
-body {
-    font-family: 'Courier New', Courier, monospace;
-    background-color: #333333;
-}
-
-html,
-body {
-    border-color: #E7E5E2;
-    color: #E7E5E2;
-}
-
-hr {
-    display: none;
-}
-
-a {
-    color: #8FA3A9;
-}
-
-#header {
-    border-radius: 10px;
-    text-align: center;
-    width: 100%;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    background-color: #8FA3A9;
-    color: #243233;
-    font-weight: bolder;
-    font-size: large;
-}
-
-#content {
-    min-width: 400px;
-    max-width: 900px;
-    width: 65%;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.ab {
-    float: none;
-    border-radius: 10px;
-    margin-top: 10px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    padding: 5px;
-    background-color: #89A6C0;
-}
-
-.a {
-    float: left;
-    width: 45%;
-    box-sizing: border-box;
-    padding: 25px;
-    border-radius: 10px;
-    border: 1px solid transparent;
-    background-color: #F7D214;
-    color: #243233;
-    font-weight: bold;
-    text-align: left;
-    font-family: 'Courier New', Courier, monospace;
-    cursor: pointer;
-    text-indent: -25px;
-    padding-left: 50px;
-    hyphens: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.b {
-    float: left;
-    width: 45%;
-    box-sizing: border-box;
-    padding: 25px;
-    border-radius: 10px;
-    border: 1px solid transparent;
-    background-color: #243233;
-    color: #F7D214;
-    font-weight: bold;
-    text-align: left;
-    font-family: 'Courier New', Courier, monospace;
-    cursor: pointer;
-    text-indent: -25px;
-    padding-left: 50px;
-    hyphens: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-input[type="radio"] {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-    cursor: pointer;
-}
-
-.ab input:checked+label {
-    background-color: #B3472B;
-    border: 1px solid #000000;
-    color: #E7E5E2;
-}
-
-.separator {
-    float: left;
-    width: 10%;
-    box-sizing: border-box;
-    writing-mode: vertical-lr;
-    transform: rotate(210deg);
-    font-size: x-small;
-    font-weight: bold;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #243233;
-}
-
-#footer {
-    margin-top: 10px;
-}
-
-#questions {
-    font-size: small;
-    text-align: center;
-    width: 45%;
-    float: left;
-    border-radius: 10px;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    color: #F7D214;
-    font-weight: bold;
-}
-
-#next {
-    text-align: center;
-    width: 45%;
-    float: left;
-    border: 0px;
-    border-radius: 10px;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    background-color: #8FA3A9;
-    color: #243233;
-    font-weight: bold;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: medium;
-    display: block;
-    cursor: pointer;
-}
-
-@media only screen and (max-width:1600px) {
-    #content {
-        min-width: 75%;
-    }
-}
-
-@media only screen and (max-width:1280px) {
-    #content {
-        min-width: 95%;
-    }
-}
-
-@media only screen and (max-width:640px) {
-    #content {
-        min-width: 95%;
-        transform: none;
-        position: absolute;
-        top: 5px;
-        left: 50%;
-        transform: translate(-50%);
-    }
-
-    #next {
-        min-width: 100%;
-    }
-
-    #questions {
-        min-width: 100%;
-        padding-top: 0px;
-        padding-bottom: 5px;
-    }
-
-    .a {
-        font-size: small;
-    }
-
-    .b {
-        font-size: small;
-    }
+:root {
+    --bg: #E7E5E2;
+    --fg: #243233;
+    --br: #243233;
+    --fg-lnk: #8FA3A9;
+
+    --bg-header: #8FA3A9;
+    --fg-header: #243233;
+    --bg-ab: #89A6C0;
+
+    --bg-a: #F7D214;
+    --fg-a: #243233;
+    --bg-b: #243233;
+    --fg-b: #F7D214;
+
+    --bg-ab-chkd: #B3472B;
+    --fg-ab-chkd: #E7E5E2;
+    --br-ab-chkd: #000000;
+
+    --fg-sep: #243233;
+    --fg-que: #243233;
+    --bg-nxt: #8FA3A9;
+    --fg-nxt: #243233;
 }
diff --git a/templates/index.html b/templates/index.html
index 1a384d1..c8e29bc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,13 +3,11 @@
 
 <head>
     <title>{{ title }}</title>
-    {%- if theme == "dark" %}
-    <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
-    <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
-    {%- elif theme == "light" %}
+    <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
+    {%- if theme == "light" %}
     <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
     {%- else %}
-    <link rel="stylesheet" type="text/css" href="/css/auto.css?t={{ epoch }}">
+    <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
     {%- endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">