Update style.css

style.css

@@ -9,10 +9,6 @@ html, body {
     background: black;
 }
 
-body {
-    width: 100%;
-}
-
 .clock {
     color: #73b66f;
     font-size: 180px;
@@ -34,7 +30,7 @@ body {
     color: white;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
     text-align: center;
 }
@@ -45,29 +41,23 @@ body {
 
 .settings {
     display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: center;
-    width: 100%;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 80%;
 }
 
-.color-options, .font-options, .toggle-options, .spacing-options, .size-options, .background-options {
-    margin: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.color-options, .font-options, .toggle-options, .spacing-options {
+    margin: 0 20px;
 }
 
-.color-option, .font-option, .toggle-option, .background-option {
+.color-option, .font-option, .toggle-option {
     padding: 10px;
     cursor: pointer;
     border-radius: 10px;
-    background: #444;
-    margin-bottom: 5px;
 }
 
-.color-option:hover, .font-option:hover, .toggle-option:hover, .background-option:hover {
-    background: #555;
+.color-option:hover, .font-option:hover, .toggle-option:hover {
+    background: #444;
 }
 
 button {
@@ -77,26 +67,18 @@ button {
     background: #555;
     border: none;
     color: white;
+    margin-top: 20px;
     border-radius: 20px;
-    margin: 10px;
 }
 
 button:hover {
     background: #777;
 }
 
-.menu-buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 100%;
-}
-
 input[type="checkbox"] {
     margin-right: 10px;
 }
 
-input[type="range"], input[type="color"] {
-    width: 80%;
-    margin: 5px 0;
+input[type="range"] {
+    width: 100%;
 }