* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #161824;
  font-family: 'Roboto', sans-serif;
}




/* title area above player */
.flex-container-title {
  max-width: 600px;
  margin: 5px auto;
  padding: 5px;
  /* background-color: #bbb; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border-radius: 5%; */
}

.title-label {
  color: #bbb;
  margin: 10 px auto;
}

.stream-title {
  color: #eee;
  margin: auto;
}

/* livestream player interface */
.flex-container-column {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #bbb;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5%;
}

#cover-art {
  position: relative;
  max-width: 340px;
  width: 340px;
}

#cover-art img {
  width: 340px;
}

#updated-cover-art {
  position: absolute;
  top: 0px;
  z-index: 2;
  width: 340px;
}

#showImage {
  z-index: 3;
}

#title {
  color: #eee;
  font-size: 25px;
  margin: 20px 0 0;
  padding: 0;
}

#mix {
  color: #ddd;
  padding: 5px 0 0;
  margin: 0;
}

#artist {
  color: #ddd;
  font-size: 20px;
  padding: 0 0 20px;
}

.now-playing-text {
  font-size: 15px;
  color: #fff
}

audio {
  width: auto;
  min-width: 200px;
  height: 25px;
}


/* channel button template */
.flex-container-channel-buttons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.channel-button {
  display: flex;
  background-color: #062B63;
  border-radius: 5%;
  padding: 30px;
  max-height: 120px;
  align-items: center;
  cursor: pointer;
}


.channel-image {
  max-width: 120px;
  border-radius: 5% 0 0 5%;
}

.channel-title {
  color:#eee;
  font-size: 130%;
  padding: 30px 5px 30px 30px;
}

.fa-play-circle {
  color: #eee;
  padding: 30px 30px 30px 5px;
}


/* individual buttons */
.ch11_deepend {
  background-color: #062B63;
}

.ch12_bff {
  background-color: #5b3838;
}

.ch13_melodia {
  /* background-color: #f1ab8d; */
  background-color: #d0675f;
}

.ch14_progression {
  background-color: #2f468c;
}

.ch15_clubhouse {
  background-color:#ecc47c;
}

.ch16_warehouse {
  background-color: #3b6244;
}

.ch17_technique {
  background-color: #444a55;
}

.ch18_trancemitter {
  background-color: #cd6337;
}