Change to dark theme

Frontend/assets/css/frame.css

@@ -1,7 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
 
+html {
+    background-image: url("../images/background.jpg");
+}
+
 body {
     font-family: 'Nunito', sans-serif;
+    
     color: #2e3133;
     font-weight: normal;
     margin: 0px;
@@ -19,9 +24,10 @@ body {
 }
 
 div#header {
-    background-color: #FFFFFF;
+    background-color: transparent;
     width: 100%;
     height: 80px;
+    backdrop-filter: blur(10px);
 }
 
 #logo {
@@ -31,18 +37,20 @@ div#header {
 
 iframe#frame {
     flex-grow: 1;
+    background-color: #FFFFFF;
 }
 
 div#content {
     width: 100%;
     height: calc(100% - 80px);
     display: flex;
+    backdrop-filter: blur(10px);
 }
 
 div#toolList {
     float: left;
     width: 200px;
-    background-color: #FFFFFF;
+    background-color: transparent;
     height: 100%;
 }
 
@@ -66,17 +74,19 @@ div#copyright a, a:visited,  a:active {
 ul#toolList {
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 10px 0 0 0;
     overflow: hidden;
     display: block;
     float: left;
-    background-color: #FFFFFF;
+    background-color: transparent;
     width: 100%;
+    height: calc(100% - 80px);
+    backdrop-filter: blur(10px);
 }
 
 #toolListRow a {
     display: block;
-    color: black;
+    color: white;
     text-align: center;
     padding: 20px 50px 25px;
     text-decoration: none;
@@ -85,6 +95,32 @@ ul#toolList {
 #toolListRow a:hover {
     background-color: #2A93B0;
     color: white;
-    transform: scale(1.25, 1.25);
+    transform: matrix(1.25, 0, 0, 1.25, 15, 0);
     transition-duration: .3s;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    
+
+    div#header {
+        background-color: #00000000;
+        backdrop-filter: blur(10px);
+    }
+
+    ul#toolList {
+        background-color: #00000000;
+        backdrop-filter: blur(10px);
+    }
+
+    div#toolList {
+        background-color: #00000000;
+        backdrop-filter: blur(10px);
+
+    }
+
+    #toolListRow a {
+        color: white;
+    }
+
 }