diff --git a/style.css b/style.css
index 2f81188..b8369fc 100644
--- a/style.css
+++ b/style.css
@@ -118,7 +118,9 @@ body{
color: red;
}
-
+div{
+ color: whitesmoke;
+}
.dark-mode #container div:hover{
background-color: rgb(6, 39, 59);
@@ -217,3 +219,85 @@ body{
.redo-button:hover {
opacity: 0.8;
}
+
+ :root {
+ --bg: rgb(137, 144, 158);
+ --bg-input: #141419;
+}
+
+
+:root{
+ --bg:linear-gradient(to top right, #363690 41%, #3ec7f5 100%);
+
+ --bg-input: #e1e1ed;
+}
+
+
+/* light mode edited */
+
+.light-mode {
+ --bg: linear-gradient(to left, #2a2d30, #080a0c);
+ --bg-input: #fcf9f9;
+}
+
+body {
+ background: var(--bg);
+ color: var(--color-text);
+ /*font-weight: 500;
+ display: flex;*/
+}
+
+.switch {
+ position: absolute;
+ margin-left: -9999px;
+ visibility: hidden;
+}
+
+.switch+label {
+ display: block;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ user-select: none;
+}
+
+.switch+label {
+ padding: 2px;
+ width: 52px;
+ height: 27px;
+ background-color: var(--color-border), rgba(23, 21, 21, 0.3);
+ border-radius: 100px;
+}
+
+.switch+label:before,
+.switch+label:after {
+ display: block;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ bottom: 1px;
+ content: "";
+}
+
+.switch+label:before {
+ right: 1px;
+ background-color: var(--bg-input);
+ border-radius: 60px;
+ transition: all 0.4s;
+}
+
+.switch+label:after {
+ width: 30px;
+ background-color: #fff;
+ border-radius: 100%;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ transition: all 0.4s;
+}
+
+.switch:checked+label:before {
+ background-color: #f3eff5;
+}
+
+.switch:checked+label:after {
+ transform: translateX(30px);
+}