@@ -3,7 +3,14 @@
   padding: 0%;
   box-sizing: border-box;
   font-size: 62.5%;
+  font-family: "sans";
 }
+/* -----------Font Change----------------- */
+@font-face {
+  font-family: "sans";
+  src: url(font/sans.ttf);
+}
+
 .main_div {
   width: 100vw;
   height: 100vh;
@@ -96,6 +103,41 @@ img {
 .anime {
   animation: rotatePlayer 3s linear 3s;
 }
+
+/* -------------Volume---------------- */
+.volume_slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 5px;
+  background: #83a9ff;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+.volume_slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  background: white;
+  border: 2.5px solid #3774ff;
+  cursor: pointer;
+  border-radius: 100%;
+}
+.volume_slider:hover {
+  opacity: 1.0;
+}
+.volume_slider {
+  margin-top: 15px ;
+  width: 60%;
+}
+ .fa{
+  width: 15px;
+  color: #fff;
+  padding: 10px;
+}
+
 @keyframes rotatePlayer {
   from {
     transform: rotate(0deg);
 
@@ -63,4 +63,11 @@ const prevsong = () => {
     playmusic();
 }
 next.addEventListener('click', nextsong);
-previous.addEventListener('click', prevsong);
+previous.addEventListener('click', prevsong);
+
+//volume control
+let volume_slider = document.querySelector('.volume_slider');
+
+function setVolume(){
+    audio.volume = volume_slider.value / 100;
+}
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Music System</title>
+    <title>Music Player</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
         integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -28,6 +28,14 @@ <h3 id="artist">Dharia</h3>
                 <i class="fa-solid fa-play main-button" id="Play" title="Play"></i>
                 <i class="fa-solid fa-forward" id="Next" title="Next"></i>
             </div>
+
+            <!-- -----Volume Control------ -->
+            <div class="slider_container">
+                <i class="fa fa-volume-down"></i>
+                <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
+                <i class="fa fa-volume-up"></i>
+            </div>
+
         </div>
     </div>
     <script src="Music.js"></script>