From 2f4efbe7e8d62a0e065303e0df7b50943cea6223 Mon Sep 17 00:00:00 2001
From: Max <Hunt>
Date: Fri, 23 Oct 2020 00:10:28 +0100
Subject: [PATCH] Update

---
 site/views/css/style.css | 205 +++++++++++++++++++++------------------
 1 file changed, 109 insertions(+), 96 deletions(-)

diff --git a/site/views/css/style.css b/site/views/css/style.css
index 18d21ae..15646ca 100755
--- a/site/views/css/style.css
+++ b/site/views/css/style.css
@@ -1,131 +1,144 @@
 * {
-	margin: 0;
-	padding: 0;
-	text-decoration: none;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
 }
 
-@font-face{
-	font-family: os;
-	src: url(../fonts/ops.ttf);
+@font-face {
+    font-family: os;
+    src: url(../fonts/ops.ttf);
 }
 
-@font-face{
-	font-family: osl;
-	src: url(../fonts/opsl.ttf);
+@font-face {
+    font-family: osl;
+    src: url(../fonts/opsl.ttf);
 }
 
-@font-face{
-	font-family: osb;
-	src: url(../fonts/opsb.ttf);
+@font-face {
+    font-family: osb;
+    src: url(../fonts/opsb.ttf);
 }
 
 :root {
-	--background: whitesmoke;
-	--cell_background: transparent;
-	--cp_color: grey;
-	--title-color: #333333;
+    --background: whitesmoke;
+    --cell_background: transparent;
+    --text_color: grey;
+    --title-color: #333333;
+    --dev-background: red;
 }
 
 body {
-	background: var(--background);
-	margin-left: auto;
-	margin-right: auto;
-	font-family: osl;
-	max-width: 1300px;
-	padding: 1rem;
+    background: var(--background);
+    margin-left: auto;
+    margin-right: auto;
+    font-family: osl;
+    max-width: 1300px;
+    padding: 1rem;
+    color: var(--text_color);
 }
 
 .page-container {
-	display: block;
-
+    display: block;
 }
 
 .container {
-	background-color: var(--cell_background);
-	color: var(--title-color);
-	padding: 1rem;
-	height: 400px;
-  }
+    background-color: var(--cell_background);
+    color: var(--title-color);
+    padding: 1rem;
+    height: 400px;
+}
 
-  .containers {
-	max-width: 1300px;
-	margin: 0 auto;
-	display: grid;
-	grid-gap: 1rem;
-  }
+.containers {
+    max-width: 1300px;
+    margin: 0 auto;
+    display: grid;
+    grid-gap: 1rem;
+}
 
-  .chart {
-	  height: 400px;
-  }
+.chart {
+    height: 400px;
+}
 
-  .container-title {
-	  font-family: osb;
-	  font-size: 30px;
-	  color: var(--title-color);
-  }
+.container-title {
+    font-family: osb;
+    font-size: 30px;
+    color: var(--title-color);
+}
 
-  .copyright-container {
-	  position: absolute;
-	  max-width: 1300px;
-	  width: 100%;
-	  height: 40px;
-  }
+.copyright-container {
+    position: absolute;
+    max-width: 1300px;
+    width: 100%;
+    height: 40px;
+}
 
-  .copyright {
-	  display: inline-flex;
-	  float: right;
-  }
+.copyright {
+    display: inline-flex;
+    float: right;
+}
 
-  .copyright img {
-	  height: 30px;
-	  padding-top: 3px;;
-  }
+.copyright img {
+    height: 30px;
+    padding-top: 3px;
+}
 
-  .copyright-text {
-	  font-size: 25px;
-	  padding-left: 10px;
-	  color: var(--cp_color);
-  }
+.copyright-text {
+    font-size: 25px;
+    padding-left: 10px;
+    color: var(--cp_color);
+}
 
-  .title {
-	  font-family: osb;
-	  text-align: center;
-	  font-size: 45px;
-	  color: var(--title-color);
-	  padding-bottom: 20px;
-	  padding-top: 10px;
-  }
+.title {
+    font-family: osb;
+    text-align: center;
+    font-size: 45px;
+    color: var(--title-color);
+    padding-bottom: 20px;
+    padding-top: 10px;
+}
 
-  .first-row {
-	  height: 600px;
-  }
+.first-row {
+    height: 600px;
+}
 
-  .title-row {
-	  height: 10px;
-  }
+.title-row {
+    height: 10px;
+}
 
-  .in-development {
-	  height: 70px;
-	  width: 100%;
-	  background-color: red;
-	  color: white;
-	  text-align: center;
-	  font-size: 50px;
-	  font-family: osb;
-  }
+.in-development {
+    height: 70px;
+    width: 100%;
+    background-color: var(--dev-background);
+    color: white;
+    text-align: center;
+    font-size: 50px;
+    font-family: osb;
+}
 
-  @media (min-width: 900px) {
-	.containers { grid-template-columns: repeat(2, 1fr); }
-  }
-
-  @media only screen and (max-device-width: 480px) {
-	.containers { grid-template-columns: repeat(1, 1fr); }
-  }
+@media (min-width: 900px) {
+    .containers {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
 
+@media only screen and (max-device-width: 480px) {
+    .containers {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}
 
+@media (prefers-color-scheme: dark) {
+     :root {
+        --background: rgb(34, 34, 34);
+        --cell_background: transparent;
+        --text_color: rgb(252, 252, 252);
+        --title-color: #ebebeb;
+        --dev-background: rgb(0, 89, 255);
+    }
+}
 
 main svg {
-	position: relative;
-	left: 50%;
-	transform: translate(-50%);
-}
+    position: relative;
+    left: 50%;
+    transform: translate(-50%);
+}
\ No newline at end of file