diff --git a/index.html b/index.html
index 3747770..5e53c61 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,12 @@
diff --git a/style.css b/style.css
index 2d6246f..d29c608 100644
--- a/style.css
+++ b/style.css
@@ -5,7 +5,7 @@
html {
background-color: #1e1e1e;
- cursor: url(img/Orange_cursor.png) , default !important
+ cursor: url(img/Orange_cursor.png), default !important
}
body {
@@ -47,6 +47,64 @@ button {
font-size: 16px;
}
+/* Начало стилей для переключателя темы */
+.themeSwitch input[type="checkbox"] {
+ display: none;
+ visibility: hidden;
+}
+
+.themeSwitch {
+ --size: 50px;
+}
+
+.themeSwitch .block {
+ position: relative;
+ clear: both;
+ float: left;
+}
+
+.themeSwitch label {
+ width: var(--size);
+ height: calc(var(--size) / 2);
+ box-sizing: border-box;
+ border: 3px solid;
+ float: left;
+ border-radius: 100px;
+ position: relative;
+ cursor: pointer;
+ transition: .3s ease;
+ color: black;
+ background: white;
+ cursor: url(img/Orange_pointer.png), pointer !important;
+ margin-top: 10px;
+}
+
+.themeSwitch input[type=checkbox]:checked+label {
+ background: orangered;
+}
+
+.themeSwitch input[type=checkbox]:checked+label:before {
+ left: calc(var(--size) / 2);
+ background: white;
+}
+
+.themeSwitch label:before {
+ transition: .3s ease;
+ content: '';
+ width: calc((var(--size) / 2) - 10px);
+ height: calc((var(--size) / 2) - 10px);
+ position: absolute;
+ background: orangered;
+ left: 5px;
+ top: 2px;
+ box-sizing: border-box;
+ border: 3px solid;
+ color: black;
+ border-radius: 100px;
+}
+
+/* Конец стилей для переключателя темы */
+
.btns {
margin: 7px auto;
width: 60%;