.counter{

font-size: 30px;
color: white;
text-align:justify;
font-family: "monospace", "Courier"

} 

.transport{

width:100px;
height:100px;

}

.container{
display:flex;
}


/*Container 1*/

.container1 {
  margin:auto;
  position: relative;
  left:15px;
  width: 33%;
  max-width: 600px;
}

.container img1 {
  width: 100%;
  height: auto;
}

.txt-song1 {
  font-family: lblfont1;
  font-size:20px;
  color:blue;
  position:absolute;
  top: 17%;
  left: 40%;
}

.txt-artist1 {
  font-family: lblfont1;
  font-size:25px;
  position:absolute;
  top: 20%;
  left: 30%;
  color:#e942f5;
}

.txt-elapsed1 {
  position:absolute;
  top: 40%;
  left: 45%;
  color: black;
}

.txt-remain1 {
  position:absolute;
  top: 40%;
  left: 75%;
  color: black;
}

.txt-remain-minute1 {
  position:absolute;
  top: 40%;
  left: 55%;
  color: black;
}

.txt-remain-second1 {
  position:absolute;
  top: 40%;
  left: 65%;
  color: black;
}

.txt-tracktime1 {
  font-family: digicounter;
  font-size:30px;
  position:absolute;
  top: 90%;
  left: 39%;
  background-color:black;
  color: #ADFF2F;
  background-size: contain;
}

.play-btn1 {
  position: absolute;
  top: 70%;
  left:52%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.pause-btn1 {
  position: absolute;
  top: 70%;
  left: 80%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.stop-btn1 {
  position: absolute;
  top: 70%;
  left:10%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.container .btn:hover1 {
  background-color: black;
  color: white;
}

.progress1 {

position: absolute;
height: 8px;
left: 0;
bottom: 0;
background-color:#8E44AD;
}

#tapestate1 {
  width: 100%;
}


/*Container 2*/


.container2 {
  margin:auto;
  position: relative;
  /*left:20px;*/
  width: 33%;
  max-width: 600px;
}

.container img2 {
  width: 100%;
  height: auto;
}

.txt-song2 {
  font-family: lblfont2;
  position:absolute;
  top: 18%;
  left: 35%;
  color: black;
  opacity:0.5
}

.txt-artist2 {
  font-family: lblfont2;
  position:absolute;
  top: 21%;
  left: 30%;
  color:black;
}

.txt-elapsed2 {
  position:absolute;
  top: 40%;
  left: 45%;
  color: black;
}

.txt-remain2 {
  position:absolute;
  top: 40%;
  left: 75%;
  color: black;
}

.txt-remain-minute2 {
  position:absolute;
  top: 40%;
  left: 55%;
  color: black;
}

.txt-remain-second2 {
  position:absolute;
  top: 40%;
  left: 65%;
  color: black;
}

.txt-tracktime2 {
  font-family: digicounter;
  font-size:30px;
  position:absolute;
  top: 90%;
  left: 39%;
  background-color:black;
  color: #ADFF2F;
  background-size: contain;
}

.play-btn2 {
  position: absolute;
  top: 70%;
  left:52%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.pause-btn2 {
  position: absolute;
  top: 70%;
  left: 80%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.stop-btn2 {
  position: absolute;
  top: 70%;
  left:10%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.container .btn:hover2 {
  background-color: black;
  color: white;
}

.progress2 {

position: absolute;
height: 5px;
left: 0;
bottom: 0;
background-color:#8E44AD;
}

#tapestate2 {
  width: 100%;
}


/*Container 3*/


.container3 {
  margin-right:25px;
  position: relative;
  /*left:20px;*/
  width: 33%;
  max-width: 600px;
}

.container img3 {
  width: 100%;
  height: auto;
}

.txt-song3 {
  font-family: lblfont3;
  position:absolute;
  top: 17%;
  left: 30%;
  color: black;
}

.txt-artist3 {
  font-family: lblfont3;
  position:absolute;
  top: 20%;
  left: 40%;
  color:black;
}

.txt-elapsed3 {
  position:absolute;
  top: 40%;
  left: 45%;
  color: black;
}

.txt-remain3 {
  position:absolute;
  top: 40%;
  left: 75%;
  color: black;
}

.txt-remain-minute3 {
  position:absolute;
  top: 40%;
  left: 55%;
  color: black;
}

.txt-remain-second3 {
  position:absolute;
  top: 40%;
  left: 65%;
  color: black;
}

.txt-tracktime3 {
  font-family: digicounter;
  font-size:30px;
  position:absolute;
  top: 90%;
  left: 39%;
  background-color:black;
  color: #ADFF2F;
  background-size: contain;
}

.play-btn3 {
  position: absolute;
  top: 70%;
  left:52%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.pause-btn3 {
  position: absolute;
  top: 70%;
  left: 80%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.stop-btn3 {
  position: absolute;
  top: 70%;
  left:10%;
  background-size: cover;
  background-color:transparent;
  width: 65px;
  height: 60px;
}

.container .btn:hover3 {
  background-color: black;
  color: white;
}

.progress3 {

position: absolute;
height: 5px;
left: 0;
bottom: 0;
background-color:#8E44AD;
}

#tapestate3 {
  width: 100%;
}