update

assets/design.css

@@ -1,56 +1,102 @@
-
-* {
-    box-sizing: border-box;
+*{
     margin: 0;
     padding: 0;
-    background-color: #24252A;
-}
-
-li, a, button {
+    box-sizing: border-box;
     font-family: sans-serif;
-    font-weight: 500;
-    font-size: 16px;
-    color: #ecf0f1;
-    text-decoration: none;
 }
 
-header {
+body{
+    height: 100vh;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 30px 10%;
+    justify-content: center;
 }
 
-.logo {
+.menu {
+    overflow: hidden;
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.menu a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 25px 16px;
+    text-decoration: none;
+    transition: ease 0.3s;
+}
+
+.menu p{
+    position: fixed;
+    top: 25px;
+    right: 100px;
+    color: #f2f2f2;
+}
+
+.menu a:hover {
+    background: #ddd;
+    color: black;
+}
+
+.seite {
+    width: 100%;
+    height: 100%;
+    padding: 80px 20px;
+    transition: .4s ease;
+}
+
+.seite h1 {
+    text-align: center;
+}
+
+.seite p {
+    padding: 30px 0;
+}
+
+
+#dark_mode {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    appearance: none;
+    -webkit-appearance : none;
+    -moz-appearance : none;
+    -o-appearance : none;
+    width: 70px;
+    height: 35px;
+    background: black;
+    border-radius: 22px;
     cursor: pointer;
+    outline: none;
 }
 
-.menu_list {
-    list-style: none;
-}
-
-.menu_list li {
-    display: inline-block;
-    padding: 0px 20px;
-}
-
-.menu_list li a {
-    transition: all 0.3s ease 0.5s;
-}
-
-.menu_list li a :hover {
-    color: #0088a9;
-}
-
-button {
-    padding: 9px 25px;
-    background-color: rgba(0,13,169,1);
-    border: none;
-    border-radius: 50px;
+#dark_mode::before {
+    content: '';
+    position: absolute;
+    width: 35px;
+    height: 30px;
+    background-color:white;
+    border-radius: 35px;
+    top: 2px;
+    left: 2px;
     cursor: pointer;
-    transition: all 0.3s ease 0s;
+    transition: .3s linear;
 }
 
-button:hover {
-    background-color: rgba(0,13,169,0.8);
+#dark_mode:checked + .seite {
+    background-color: rgb(19, 18, 18);
+    color: white;
+}
+
+
+#dark_mode:checked::before {
+    left: 30px;
+}
+
+#dark_mode:checked {
+    background: rgb(12, 177, 81);
 }