Add mute button, change slider

css/msgbox.css

@@ -2,7 +2,8 @@
     position: fixed;
     padding: 10px;
     margin: 0px;
-    width: 299px;
+    width: auto;
+    height: auto;
     top: 20px;
     right: 20px;
     text-align: center;

css/scroll_text.css

@@ -0,0 +1,45 @@
+@-webkit-keyframes scroll {
+    0% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+    100% {
+        -webkit-transform: translate(-100%, 0);
+        transform: translate(-100%, 0)
+    }
+}
+
+@-moz-keyframes scroll {
+    0% {
+        -moz-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+    100% {
+        -moz-transform: translate(-100%, 0);
+        transform: translate(-100%, 0)
+    }
+}
+
+@keyframes scroll {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(-100%, 0)
+    }
+}
+
+.marquee {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.marquee span {
+  display: inline-block;
+  padding-left: 100%;
+  -webkit-animation: scroll 15s infinite linear;
+  -moz-animation: scroll 15s infinite linear;
+  animation: scroll 15s infinite linear;
+}

css/style.css

@@ -3,17 +3,17 @@ body {
 }
 
 .parent {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    background: url(/pic/bg.jpg) no-repeat center center / cover;
-    left: 0;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    overflow: auto;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background: url(/pic/bg.jpg) no-repeat center center / cover;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  overflow: auto;
 }
 
 #RadioBox{
@@ -113,7 +113,6 @@ h1 {
 }
 
 .btn-wrap {
-	//max-width: 250px;
 	margin: auto;
 	display: -webkit-flex;
 	display: -moz-flex;
@@ -122,52 +121,21 @@ h1 {
 	display: flex;
 }
 
+.mute_btn {
+  width: 30px;
+	height: 30px;
+	border-radius: 5px;
+	border: #f54e4e;
+	background-color: #000;
+	color: #fff;
+	transition: 0.5s ease all;
+	outline: none;
+	cursor: pointer;
+	text-align: center;
+	margin: auto;
+	justify-content : center;
+}
+
 DIV {
   text-align: center
 }
-
-@-webkit-keyframes scroll {
-    0% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-    100% {
-        -webkit-transform: translate(-100%, 0);
-        transform: translate(-100%, 0)
-    }
-}
-
-@-moz-keyframes scroll {
-    0% {
-        -moz-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-    100% {
-        -moz-transform: translate(-100%, 0);
-        transform: translate(-100%, 0)
-    }
-}
-
-@keyframes scroll {
-    0% {
-        transform: translate(0, 0);
-    }
-    100% {
-        transform: translate(-100%, 0)
-    }
-}
-
-.marquee {
-  display: block;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.marquee span {
-  display: inline-block;
-  padding-left: 100%;
-  -webkit-animation: scroll 15s infinite linear;
-  -moz-animation: scroll 15s infinite linear;
-  animation: scroll 15s infinite linear;
-}

css/volume.css

@@ -0,0 +1,38 @@
+#volume {
+  width: 40%; /* Width of the outside container */
+}
+
+/* The slider itself */
+.slider {
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 40%; /* Full-width */
+  height: 20px; /* Specified height */
+  background: #d3d3d3; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+}
+
+/* Mouse-over effects */
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #000;
+  cursor: pointer; /* Cursor on hover */
+}
+
+.slider::-moz-range-thumb {
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #000; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}