Update

site/views/css/style.css

@@ -4,17 +4,17 @@
     text-decoration: none;
 }
 
-@font-face{
+@font-face {
     font-family: os;
     src: url(../fonts/ops.ttf);
 }
 
-@font-face{
+@font-face {
     font-family: osl;
     src: url(../fonts/opsl.ttf);
 }
 
-@font-face{
+@font-face {
     font-family: osb;
     src: url(../fonts/opsb.ttf);
 }
@@ -22,8 +22,9 @@
 :root {
     --background: whitesmoke;
     --cell_background: transparent;
-	--cp_color: grey;
+    --text_color: grey;
     --title-color: #333333;
+    --dev-background: red;
 }
 
 body {
@@ -33,11 +34,11 @@ body {
     font-family: osl;
     max-width: 1300px;
     padding: 1rem;
+    color: var(--text_color);
 }
 
 .page-container {
     display: block;
-
 }
 
 .container {
@@ -45,84 +46,96 @@ body {
     color: var(--title-color);
     padding: 1rem;
     height: 400px;
-  }
+}
 
-  .containers {
+.containers {
     max-width: 1300px;
     margin: 0 auto;
     display: grid;
     grid-gap: 1rem;
-  }
+}
 
-  .chart {
+.chart {
     height: 400px;
-  }
+}
 
-  .container-title {
+.container-title {
     font-family: osb;
     font-size: 30px;
     color: var(--title-color);
-  }
+}
 
-  .copyright-container {
+.copyright-container {
     position: absolute;
     max-width: 1300px;
     width: 100%;
     height: 40px;
-  }
+}
 
-  .copyright {
+.copyright {
     display: inline-flex;
     float: right;
-  }
+}
 
-  .copyright img {
+.copyright img {
     height: 30px;
-	  padding-top: 3px;;
-  }
+    padding-top: 3px;
+}
 
-  .copyright-text {
+.copyright-text {
     font-size: 25px;
     padding-left: 10px;
     color: var(--cp_color);
-  }
+}
 
-  .title {
+.title {
     font-family: osb;
     text-align: center;
     font-size: 45px;
     color: var(--title-color);
     padding-bottom: 20px;
     padding-top: 10px;
-  }
+}
 
-  .first-row {
+.first-row {
     height: 600px;
-  }
+}
 
-  .title-row {
+.title-row {
     height: 10px;
-  }
+}
 
-  .in-development {
+.in-development {
     height: 70px;
     width: 100%;
-	  background-color: red;
+    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 (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 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;