optimize a lot of stuff

css/main.css

@@ -1,4 +1,3 @@
-@import url("/css/themes.css");
 @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
 :root {
     --text-color: #fff;
@@ -9,6 +8,51 @@
     --color-3: #3C096C;
     --color-4: #240046;
 }
+body[theme=blackandwhite] {
+    --text-color: #fff;
+    --bg-1: #504d53;
+    --bg-2: #090909;
+    --color-1: #bfbfbf;
+    --color-2: #8e8e8e;
+    --color-3: #5c5c5c;
+    --color-4: #000000;
+}
+body[theme=grass] {
+    --text-color: #ffffff;
+    --bg-1: #385041;
+    --bg-2: #1d3024;
+    --color-1: #a8e5a7;
+    --color-2: #559b7a;
+    --color-3: #3a5c3f;
+    --color-4: #242e22;
+}
+body[theme=evil] {
+    --text-color: #ffffff;
+    --bg-1: #ba2a2a;
+    --bg-2: #591414;
+    --color-1: #eb8181;
+    --color-2: #ae4141;
+    --color-3: #7b3838;
+    --color-4: #4f2626;
+}
+body[theme=sky] {
+    --text-color: #ffffff;
+    --bg-1: #5d9dae;
+    --bg-2: #3c7aa6;
+    --color-1: #04eeff;
+    --color-2: #2ab9f2;
+    --color-3: #3188bd;
+    --color-4: #23588a;
+}
+body[theme=xmas] {
+    --text-color: #dcffab;
+    --bg-1: #a00000;
+    --bg-2: #400000;
+    --color-1: #dcffab;
+    --color-2: #a32a2a;
+    --color-3: #000000;
+    --color-4: #630000;
+}
 html,
 body {
     /* height: 100vh; */
@@ -22,7 +66,9 @@ body {
     margin: 0;
     border: none;
     font-family: "Mulish", serif;
-    transition-duration: 0.5s;
+}
+a, button, select, input, option {
+    transition-duration: 0.4s;
 }
 body {
     animation: 1s ease-out loadIn;
@@ -35,7 +81,7 @@ body {
 
 body {
     display: flex;
-    filter: drop-shadow(0px 0px 4px #ffffff99);
+    isolation: isolate;
 }
 
 .samerow {
@@ -139,6 +185,6 @@ button {
   cursor:pointer;
 }
 button:hover {
-  filter: brightness(1.1);
+  box-shadow: 0 0 12px var(--color-2);
   transform: scale(1.05);
 }