diff --git a/css/style.css b/css/style.css
index e235d38..1480c92 100644
--- a/css/style.css
+++ b/css/style.css
@@ -168,7 +168,7 @@ button:active {
 
 #outInfo {
     font-style: italic;
-    color: red;
+    color: #9d921d;
     margin: 20px 0;
     display: block;
 }
@@ -272,7 +272,108 @@ button:active {
     margin-top: 10px;
     font-size: 0.9rem;
 }
+.slider-container {
+    margin: 20px 0;
+    text-align: center;
+    color: #e8f0f2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
 
+.slider-container label {
+    font-size: 1.2rem;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 70%;
+    margin: 10.5px 0;
+    background-color: #0d2f25;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    background: #1bec99;
+    border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    border: 2px solid #159262;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -6px;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 10px #1bec99;
+}
+
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    background: #1bec99;
+    border-radius: 5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    border: 2px solid #159262;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+input[type="range"]::-ms-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+}
+
+input[type="range"]::-ms-fill-lower {
+    background: #1bec99;
+    border-radius: 5px;
+}
+
+input[type="range"]::-ms-fill-upper {
+    background: #1bec99;
+    border-radius: 5px;
+}
+
+input[type="range"]::-ms-thumb {
+    border: 2px solid #159262;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+#sliderValueDisplay {
+    font-size: 1.1rem;
+    margin-left: 10px;
+    color: #1bec99;
+    font-weight: bold;
+}
 a {
     color: #1bec99;
     transition: color 0.3s;