Some Improves

css/soc_link.css

@@ -0,0 +1,39 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
+.social a {
+  text-align: center;
+  width:  2.3em;
+  height: 2.3em;
+  float: left;
+  background: #000;
+  border: 0.1em solid #ccc;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
+  border-radius: 2em;
+  margin: 0 1em 1em 0;
+  padding:        0.6em;
+  padding-top:    0.6em;
+  padding-right:  0.6em;
+  padding-bottom: 0.6em;
+  padding-left:   0.6em;
+  color: #fff;
+  font-size: 0.8vw;
+}
+/* .github a:hover {background: #191919; color: #fff;}
+.youtube a:hover {background: #c4302b; color: #fff;}
+.google-pluse a:hover {background: #DD4B39; color: #fff;}
+.twitter a:hover {background: #00acee; color: #fff;}
+.instagram a:hover {background: #3f729b; color: #fff;}
+.facebook a:hover {background: #3b5998; color: #fff;}
+.skype a:hover {background: #00aff0; color: #fff;}
+.vk a:hover {background: #5d84ae; color: #fff;}
+.odnoklassniki a:hover {background: #f93; color: #fff;}
+.pinterest a:hover {background: #c8232c; color: #fff;}
+.linkedin a:hover {background: #0e76a8; color: #fff;}
+.telegram a:hover {background: #249bd7; color: #fff;}
+.tumblr a:hover {background: #34526f; color: #fff;}
+.windows a:hover {background: #125acd; color: #fff;}
+.whatsapp a:hover {background: #50b154; color: #fff;}
+.weibo a:hover {background: #d52b2b; color: #fff;}
+.dropbox a:hover {background: #1087dd; color: #fff;} */
+
+.telegram a:hover {background: #fff; color: #000;}
+.lastfm a:hover {background: #fff; color: #000;}

css/style.css

@@ -3,36 +3,42 @@ body {
 }
 
 .parent {
-  width: 100%;
+  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: left;
-  overflow: auto;
+  flex-direction: row;
 }
 
-#RadioBox{
-  width: 450px;
+#RadioBox {
+  width:  25%;
   height: 100%;
   background-color: rgba(60, 60, 60, 0.9);
-  /* border-radius: 10px; */
   padding: 0 5px;
   color: #fff;
 }
 
-.tagBOX{
-  width: 410px;
-  height: 150px;
+#spec {
+  width:  75%;
+  height: 100%;
+}
+
+.canvas {
+  width:  100%;
+  height: 100%;
+}
+
+.youtubeIMG {
+  max-width:60%;
+  height:auto;
 }
 
 .tagA {
   width: 100%;
-	height: 20px;
+	/* height: 20px; */
 	border-radius: 5px 5px 0 0;
 	border: #f54e4e;
 	background-color: #000;
@@ -42,7 +48,8 @@ body {
 	cursor: pointer;
 	text-align: center;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  font-size: 1vw;
 }
 
 .tagA:hover {
@@ -67,20 +74,20 @@ body {
 h1::before {
   content: '';
   display: inline-block;
-  margin:0 10px;
-  width: 25px;
-  height: 25px;
-  -webkit-border-radius: 25px;
-  -moz-border-radius: 25px;
-  border-radius: 25px;
+  margin: 0 10px;
+  width:  0.8em;
+  height: 0.8em;
+  -webkit-border-radius: 0.8em;
+  -moz-border-radius: 0.8em;
+  border-radius: 0.8em;
   background: red;
   animation: blink 3s linear infinite;
 }
 
-@keyframes blink{
-  0%{opacity: 0;}
+@keyframes blink {
+  0%{opacity:   0;}
   25%{opacity: .5;}
-  50%{opacity: 1;}
+  50%{opacity:  1;}
   75%{opacity: .5;}
   100%{opacity: 0;}
 }
@@ -88,13 +95,14 @@ h1::before {
 h1 {
   text-align: center
   float:left;
-  margin:10px 50px;
+  /* margin:10px 50px; */
+  font-size: 2vw;
 }
 
 .btn {
-  width: 100px;
-	height: 60px;
-	border-radius: 5px;
+  width: 7em;
+  height: 4.5em;
+	border-radius: 0.4em;
 	border: #f54e4e;
 	background-color: #000;
 	color: #fff;
@@ -103,7 +111,7 @@ h1 {
 	cursor: pointer;
 	text-align: center;
 	margin: auto;
-	justify-content : center;
+	font-size: 0.8vw;
 
 }
 
@@ -122,18 +130,18 @@ h1 {
 }
 
 .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-right: 10px;
-	//margin: auto;
+  width: 2em;
+  height: 2em;
+  border-radius: 0.4em;
+  border: #f54e4e;
+  background-color: #000;
+  color: #fff;
+  transition: 0.5s ease all;
+  outline: none;
+  cursor: pointer;
+  text-align: center;
+  margin-right: 0.7em;
+  font-size: 0.8vw;
 }
 
 .mute_btn:hover {
@@ -162,7 +170,7 @@ h1 {
 
 .tlist {
   width: 100%;
-  height: 35%;
+  height: 33%;
   border-radius: 0 0 5px 5px;
   border: #f54e4e;
   background-color: #fff;
@@ -187,6 +195,16 @@ h1 {
   color: #000;
 }
 
-DIV {
-  text-align: center
+.soc_links {
+	margin: auto;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: inline-flex;
+}
+
+DIV {
+  text-align: center;
+  font-size: 1vw;
 }

css/volume.css

@@ -4,15 +4,15 @@
 
 /* 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 */
+  -webkit-appearance: none;
+  width:  50%;
+  height: 1.6em;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
   transition: opacity .2s;
+  font-size: 0.8vw;
 }
 
 /* Mouse-over effects */
@@ -24,15 +24,17 @@
 .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 */
+  width:  2em;
+  height: 2em;
   background: #000;
-  cursor: pointer; /* Cursor on hover */
+  cursor: pointer;
+  font-size: 0.8vw;
 }
 
 .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 */
+  width:  2em;
+  height: 2em;
+  background: #000;
+  cursor: pointer;
+  font-size: 0.8vw;
 }