@import url("/assets/md.css")updated cs16.css

@import url("/assets/md.css")

1 files changed, 126 insertions, 93 deletions

diff --git a/src/cs16.css b/src/cs16.css
index c20194e..a09f2cf 100644
--- a/src/cs16.css
+++ b/src/cs16.css
@@ -1,10 +1,25 @@
 :root {
-  --main: #4a5942;
-  --secondary: #c4b550;
-  --text: #fff;
+  --bg: #4a5942;
+  --secondary-bg: #3e4637;
 
-  --border-tl: #8c9284;
-  --border-br: #292c21;
+  --accent: #c4b550;
+  --secondary-accent: #958831;
+
+  --text: #dedfd6;
+  --secondary-text: #d8ded3;
+  --text-3: #a0aa95;
+
+  --border-light: #8c9284;
+  --border-dark: #292c21;
+
+  --disabled-text: #292c21;
+  --disabled-text-shadow: #75806f;
+
+  --outline: #000;
+  --slider: #7f8c7f;
+  --slider-bg: #1f1f1f;
+
+  --scrollbar-track: #5a6a50;
 }
 
 *,
@@ -47,8 +62,8 @@ h6 {
 body {
   font-weight: 400;
   line-height: 1.5;
-  background-color: #4a5942;
-  color: #dedfd6;
+  background-color: var(--bg);
+  color: var(--text);
   font-family: ArialPixel;
 }
 
@@ -59,18 +74,22 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #5a6a50;
+  background-color: var(--scrollbar-track);
   width: 18px;
-  border: 1px solid #282e22;
+  border: 1px solid var(--border-dark);
   border-left: 0;
 }
 
 ::-webkit-scrollbar-thumb {
   width: 17px;
-  background-color: var(--main);
+  background-color: var(--bg);
   border: 1px solid;
-  border-color: var(--border-tl) var(--border-br) var(--border-br)
-    var(--border-tl);
+  border-color: var(--border-light) var(--border-dark) var(--border-dark)
+    var(--border-light);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: var(--scrollbar-track);
 }
 
 ::-webkit-scrollbar-button:vertical:start:decrement,
@@ -93,14 +112,14 @@ body {
 ::-webkit-scrollbar-button:vertical:start,
 ::-webkit-scrollbar-button:vertical:end {
   border: 1px solid;
-  border-color: var(--border-tl) var(--border-br) var(--border-br)
-    var(--border-tl);
+  border-color: var(--border-light) var(--border-dark) var(--border-dark)
+    var(--border-light);
 }
 
 ::-webkit-scrollbar-button:vertical:start:active,
 ::-webkit-scrollbar-button:vertical:end:active {
-  border-color: var(--border-br) var(--border-tl) var(--border-tl)
-    var(--border-br);
+  border-color: var(--border-dark) var(--border-light) var(--border-light)
+    var(--border-dark);
 }
 
 ::-webkit-scrollbar-button:vertical:start:active,
@@ -117,14 +136,14 @@ body {
 /* Buttons */
 
 .cs-btn {
-  background-color: var(--main);
-  color: var(--text);
+  background-color: var(--bg);
+  color: #fff;
   padding: 4px 5px 3px;
   font-size: 16px;
   line-height: 15px;
   border: 1px solid;
-  border-color: var(--border-tl) var(--border-br) var(--border-br)
-    var(--border-tl);
+  border-color: var(--border-light) var(--border-dark) var(--border-dark)
+    var(--border-light);
   user-select: none;
 
   &.close {
@@ -137,7 +156,7 @@ body {
 
   &:focus-visible {
     padding: 3px 4px 2px;
-    outline: 1px solid black;
+    outline: 1px solid var(--outline);
 
     &.close {
       padding: 0;
@@ -146,13 +165,13 @@ body {
   }
 
   &:active {
-    border-color: var(--border-br) var(--border-tl) var(--border-tl)
-      var(--border-br);
+    border-color: var(--border-dark) var(--border-light) var(--border-light)
+      var(--border-dark);
   }
 
   &:disabled {
-    color: #282e22;
-    text-shadow: #75806f 1px 1px;
+    color: var(--disabled-text);
+    text-shadow: var(--disabled-text-shadow) 1px 1px;
     pointer-events: none;
   }
 }
@@ -162,8 +181,8 @@ body {
 .cs-hr {
   border-left: 0;
   border-right: 0;
-  border-top-color: #282e22;
-  border-bottom-color: #889180;
+  border-top-color: var(--border-dark);
+  border-bottom-color: var(--border-light);
 }
 
 /* Checkbox */
@@ -185,7 +204,7 @@ body {
     }
 
     &:focus-visible + .cs-checkbox__label {
-      outline: dotted 2px black;
+      outline: dotted 2px var(--outline);
       outline-offset: 3px;
     }
 
@@ -194,7 +213,7 @@ body {
     }
 
     &:checked + .cs-checkbox__label {
-      color: var(--secondary);
+      color: var(--accent);
     }
   }
 
@@ -202,7 +221,7 @@ body {
     cursor: pointer;
     display: inline-block;
     user-select: none;
-    color: #d8ded3;
+    color: var(--secondary--text);
     line-height: 15px;
 
     &:before {
@@ -211,10 +230,10 @@ body {
       vertical-align: middle;
       width: 12px;
       height: 12px;
-      background-color: #3e4637;
+      background-color: var(--secondary-bg);
       border: 1px solid;
-      border-color: var(--border-br) var(--border-tl) var(--border-tl)
-        var(--border-br);
+      border-color: var(--border-dark) var(--border-light) var(--border-light)
+        var(--border-dark);
       margin-right: 7px;
     }
 
@@ -232,35 +251,35 @@ body {
   padding: 3px 2px 2px;
   font-size: 16px;
   line-height: 17px;
-  background-color: #3e4637;
-  border-color: var(--border-br) var(--border-tl) var(--border-tl)
-    var(--border-br);
-  color: #d8ded3;
+  background-color: var(--secondary-bg);
+  border-color: var(--border-dark) var(--border-light) var(--border-light)
+    var(--border-dark);
+  color: var(--secondary--text);
 
   &:focus + .cs-input__label {
-    color: #c4b550;
+    color: var(--accent);
   }
 
   &::selection {
-    background-color: #958831;
+    background-color: var(--secondary-accent);
     color: white;
   }
 
   &:disabled {
-    background-color: var(--main);
+    background-color: var(--bg);
     pointer-events: none;
-    color: #a0aa95;
+    color: var(--text-3);
   }
 
   &:disabled + .cs-input__label {
-    color: #282e22;
-    text-shadow: #75806f 1px 1px;
+    color: var(--disabled-text);
+    text-shadow: var(--disabled-text-shadow) 1px 1px;
     pointer-events: none;
   }
 }
 
 .cs-input__label {
-  color: #d8ded3;
+  color: var(--secondary--text);
   user-select: none;
 }
 
@@ -268,7 +287,7 @@ body {
 
 .cs-select {
   outline: 0;
-  background-color: #3e4637;
+  background-color: var(--secondary-bg);
   min-width: 150px;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E");
@@ -277,11 +296,11 @@ body {
   background-size: 7px auto;
   line-height: 15px;
   padding: 5px 3px;
-  color: #d8ded3;
+  color: var(--secondary--text);
   border: 1px solid;
-  border-color: var(--border-br) var(--border-tl) var(--border-tl)
-    var(--border-br);
-  accent-color: red;
+  border-color: var(--border-dark) var(--border-light) var(--border-light)
+    var(--border-dark);
+  user-select: none;
 
   &:hover,
   &:focus-within {
@@ -289,24 +308,26 @@ body {
   }
 
   option {
-    background-color: var(--main);
-    color: #a0aa95;
+    background-color: var(--bg);
+    color: var(--text-3);
   }
 }
 
 .cs-select__label {
-  color: #d8ded3;
+  color: var(--secondary--text);
   font-size: 16px;
   line-height: 15px;
+  user-select: none;
 }
 
 /* Radio Group */
 
 .cs-fieldset {
   border: none;
+  user-select: none;
 
   legend {
-    color: #d8ded3;
+    color: var(--secondary--text);
     margin-bottom: 10px;
   }
 
@@ -317,15 +338,15 @@ body {
   &:disabled {
     input[type="radio"] {
       + label {
-        color: #282e22;
-        text-shadow: #75806f 1px 1px;
+        color: var(--disabled-text);
+        text-shadow: var(--disabled-text-shadow) 1px 1px;
         pointer-events: none;
       }
     }
 
     legend {
-      color: #282e22;
-      text-shadow: #75806f 1px 1px;
+      color: var(--disabled-text);
+      text-shadow: var(--disabled-text-shadow) 1px 1px;
       pointer-events: none;
     }
   }
@@ -338,7 +359,7 @@ body {
       cursor: pointer;
       font-size: 16px;
       line-height: 15px;
-      color: #d8ded3;
+      color: var(--secondary--text);
 
       &::before {
         content: "";
@@ -347,7 +368,7 @@ body {
         top: 1px;
         width: 12px;
         height: 12px;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23282e22'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E");
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E");
       }
 
       &::after {
@@ -362,7 +383,7 @@ body {
 
     &:checked {
       + label {
-        color: #c4b550;
+        color: var(--accent);
       }
 
       + label::after {
@@ -378,17 +399,19 @@ body {
   display: flex;
   flex-direction: column-reverse;
   width: 150px;
+  user-select: none;
 
   input {
     -webkit-appearance: none;
     appearance: none;
     width: 150px;
     height: 4px;
-    background: #1f1f1f;
+    background: var(--slider-bg);
     outline: none;
     border: 1px solid;
     box-sizing: border-box;
-    border-color: #282e22 #889180 #889180 #282e22;
+    border-color: var(--border-dark) var(--border-light) var(--border-light)
+      var(--border-dark);
   }
 
   input::-webkit-slider-thumb {
@@ -396,23 +419,23 @@ body {
     appearance: none;
     width: 8px;
     height: 16px;
-    background: #4c5844;
+    background: var(--bg);
     cursor: pointer;
     border: 1px solid;
     box-sizing: border-box;
-    border-color: var(--border-tl) var(--border-br) var(--border-br)
-      var(--border-tl);
+    border-color: var(--border-light) var(--border-dark) var(--border-dark)
+      var(--border-light);
   }
 
   label {
-    color: #d8ded3;
+    color: var(--secondary--text);
     font-size: 16px;
     line-height: 15px;
     margin-bottom: 12px;
   }
 
   &:has(input:focus) label {
-    color: #c4b550;
+    color: var(--accent);
   }
 
   .ruler {
@@ -420,7 +443,11 @@ body {
     margin-left: 4px;
     height: 5px;
     width: calc(100% + 5px);
-    background-image: linear-gradient(to right, #7f8c7f 1px, transparent 1px);
+    background-image: linear-gradient(
+      to right,
+      var(--slider) 1px,
+      transparent 1px
+    );
     background-size: 15px 5px;
     z-index: -1;
   }
@@ -428,7 +455,7 @@ body {
   .value {
     font-size: 13px;
     line-height: 15px;
-    color: #7f8c7f;
+    color: var(--slider);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -444,12 +471,13 @@ body {
   margin: auto;
   min-width: 350px;
   max-width: 510px;
-  background-color: var(--main);
-  color: #dedfd6;
+  background-color: var(--bg);
+  color: var(--text);
   border: 1px solid;
-  border-color: var(--border-tl) var(--border-br) var(--border-br)
-    var(--border-tl);
+  border-color: var(--border-light) var(--border-dark) var(--border-dark)
+    var(--border-light);
   padding: 4px;
+  user-select: none;
 
   .heading {
     display: flex;
@@ -499,6 +527,7 @@ body {
   display: inline-block;
   color: white;
   line-height: 20px;
+  user-select: none;
 
   &:hover .text {
     visibility: visible;
@@ -507,15 +536,14 @@ body {
   .text {
     visibility: hidden;
     width: max-content;
-    background-color: #958831;
+    background-color: var(--secondary-accent);
     color: black;
     text-align: center;
     font-size: 16px;
     line-height: 15px;
     position: absolute;
     z-index: 1;
-    left: 105%;
-    border: 1px solid #282e22;
+    border: 1px solid var(--border-dark);
     padding: 2px 2px 1px;
   }
 }
@@ -526,14 +554,18 @@ body {
   width: 260px;
   height: 24px;
   padding: 3px;
-  background-color: #3e4637;
+  background-color: var(--secondary-bg);
   border: 1px solid;
-  border-color: var(--border-br) var(--border-tl) var(--border-tl)
-    var(--border-br);
+  border-color: var(--border-dark) var(--border-light) var(--border-light)
+    var(--border-dark);
 
   .bars {
     height: 100%;
-    background-image: linear-gradient(to right, #c4b550 8px, transparent 2px);
+    background-image: linear-gradient(
+      to right,
+      var(--accent) 8px,
+      transparent 2px
+    );
     background-size: 12px 16px;
   }
 }
@@ -544,6 +576,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  user-select: none;
 
   .radiotab {
     position: absolute;
@@ -560,20 +593,20 @@ body {
     text-align: center;
     min-width: 64px;
     position: relative;
-    background-color: var(--main);
-    border-top: solid 1px var(--border-tl);
-    border-left: solid 1px var(--border-tl);
-    border-right: solid 1px var(--border-br);
+    background-color: var(--bg);
+    border-top: solid 1px var(--border-light);
+    border-left: solid 1px var(--border-light);
+    border-right: solid 1px var(--border-dark);
     border-bottom: none;
     margin-right: 1px;
     z-index: 10;
   }
 
   .radiotab:checked + .label {
-    background: var(--main);
+    background: var(--bg);
     padding: 5px;
     height: 29px;
-    color: #c6b652;
+    color: var(--accent);
 
     &::before {
       content: "";
@@ -582,7 +615,7 @@ body {
       left: 0px;
       width: 100%;
       height: 1px;
-      background-color: var(--main);
+      background-color: var(--bg);
     }
   }
 
@@ -591,14 +624,14 @@ body {
     position: relative;
     bottom: 1px;
     padding: 32px 39px 27px;
-    background: var(--main);
+    background: var(--bg);
     width: 100%;
-    border-left: solid 1px var(--border-tl);
-    border-bottom: solid 1px var(--border-br);
-    border-right: solid 1px var(--border-br);
-    border-top: solid 1px var(--border-tl);
+    border-left: solid 1px var(--border-light);
+    border-bottom: solid 1px var(--border-dark);
+    border-right: solid 1px var(--border-dark);
+    border-top: solid 1px var(--border-light);
     order: 99;
-    color: #dedfd6;
+    color: var(--text);
   }
 
   .radiotab:checked + .label + .panel {