/*@font-face{
    font-family: roboto-1;
    src: url('font/Roboto-Medium.ttf');
}
@font-face{
    font-family: roboto-2;
    src: url('font/Roboto-Regular.ttf');
}
@font-face{
    font-family: roboto-3;
    src: url('font/Roboto-Thin.ttf');
}*/

body{
  margin: 0;
  padding: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
:root{
  --white: #FFF;
  --black: #262626;
  --yellow: #FFBA00;
  --size1: 1.5em;
  --size2: 1.2em;
  --size3: 1em;
  --size35: .8em;
  --size4: .65em;
  --shadow: 1px 1px 5px 0px rgba(0,0,0,0.3);
  --shadow2:0px 0px 3px 0px rgba(0,0,0,0.25);
}
button{
  background: none;
  border: none;
  cursor: pointer;
}

button:active, button:focus{
  outline: none;
}
button:active{
  transform: scale(.95);
}
.root{
  position: relative;
  max-width: 480px;
  background: #361522;
  color: var(--black);
  /*font-family: roboto-2;*/
  margin: auto;
  min-height: 100vh;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}
.c-top{
  position: relative;
  padding-bottom: 85%;
}
.ct-up, .ct-down{
  position: absolute;
  width: 100%;
  height: 50%;
}
.ct-up{
  background: linear-gradient(#2B0011,#080808);
  top: 0;
}
.ct-down{
  background: linear-gradient(#95053C,#790934);
  bottom: 0;
}
.abs-center{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  transform: translate(-50%,-50%);
}
.img-sqr{
  position: relative;
  padding-bottom: 100%;
}
.img-sqr img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
.detail-s{
  background: linear-gradient(#790934,#6A0C30);
  display: flex;
  align-items: center;
  border-bottom: .5px solid rgba(255,255,255,.85);
  padding: 1em;
}
.ds-left{
  overflow: hidden;
  /*width: 75%;*/
}
.ds-right{
  width: 25%;
  display: flex;
  justify-content: flex-end;
}
.detail-title{
  color: var(--white);
  font-size: var(--size1);
  /*font-family: roboto-2;*/
  white-space: nowrap;
}
.detail-artist{
  color: var(--yellow);
  font-size: var(--size2);
  /*font-family: roboto-3;*/
  font-weight: 100;
}
.detail-s img{
  height: 3.5em;
}
.c-center{
  position: relative;
  padding: 1em;
  padding-bottom: 6.5em;
  background: linear-gradient(#6A0C30,#361522);
}
.inst{
  background: rgba(193,161,161,.2);
  color: var(--white);
  padding: .8em .6em;
  font-size: var(--size3);
  /*font-family: roboto-3;*/
  font-weight: 100;
  border-radius: 10px;
  line-height: 1.3;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
.inst span{
  /*font-family: roboto-1;*/
  font-weight: 500;
}
/*dropup*/
.dropdown{
  padding: 1em 0;
}
.dropbtn{
  background-color: var(--white);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3em;
  border-radius: 5px;
  font-size: var(--size3);
  padding: 0 1.25em;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
.dropbtn span{
  pointer-events: none;
}
.dropbtn:active, .dropdown-content button:active, .oc-item:active{
  transform: scale(.99);
}
.dropdown{
  position: relative;
}
.dropdown-content{
  display: none;
  position: absolute;
  background-color: var(--white);
  width: 100%;
  overflow: auto;
  border-radius: 5px 5px 0 0;
  bottom: 3.7em;
	animation: out .4s ease-in-out;
}
@keyframes out         {
	0% {
		transform: scale(0);
	}
	60% {
		transform: scale(1.1);
	}
	80% {
		transform: scale(.95);
	}
	100% {
		transform: scale(1);
	}
}
.dc-item{
  padding: 1em;
}
.dropdown-content button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5em;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  margin: .4em 0;
  padding: 0 1em;
  font-size: var(--size3);
  -webkit-box-shadow: var(--shadow2);
  -moz-box-shadow: var(--shadow2);
  box-shadow: var(--shadow2);
}

.dropdown-content button:disabled{
  cursor: default;
  background: #ccc;
}

.show{display: block;}
/*end dropup*/

.other-btn{
  display: flex;
  justify-content: flex-end;
}
.other-btn button{
  color: var(--yellow);
  font-size: var(--size3);
  /*font-family: roboto-2;*/
}
/*overlay*/
.overlay{
  max-height: 0;
  width: 100%;
  max-width: 480px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
  bottom: 0;
  background: var(--white);
  border-radius: 25px 25px 0 0;
  overflow-y: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 2em;
}
.oc-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75em 3em;
  text-align: left;
  border-bottom: 1px solid #CCC;
  cursor: pointer;
}
.oc-item:last-child{
  margin-bottom: 6.8em;
}
.o-title{
  font-size: var(--size2);
  /*font-family: roboto-1;*/
  font-weight: 500;
  color: var(--black) !important;
}
.o-artist{
  font-size: var(--size3);
  /*font-family: roboto-2;*/
  color: #BA0047;
}
.oc-right{
  padding-left: .5em;
}
.oc-right img{
  width: 2.5em;
}
.overlay .closebtn{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.open-overlay{
  max-height: 34em;
}
/*end overlay*/

.c-bottom{
  position: fixed;
  bottom: 0;
  background: #2B0011;
  width: 100%;
  max-width: 480px;
  left: 50%;
  transform: translate(-50%);
  z-index: 1000;
}
.cb-inner{
  padding: .5em .6em;
  display: flex;
}
.cb-left{
  display: flex;
  align-items: center;
  font-size: var(--size4);
  width: 60%;
}
.cb-left .img-sqr{
  width: 4em;
}
.cb-left .img-sqr img{
  border-radius: 0;
}
.cbl-im{
  padding-right: .7em;
}
.cbl-dd{
  overflow: hidden;
}
.cb-right{
  display: flex;
  justify-content: flex-end;
  width: 40%;
  align-items: center;
  margin-left: .5em;
}

/*detailing*/
button.play, button.pause{
  position: relative;
  width: 4.5em;
}
button.prev, button.next{
  position: relative;
  width: 3.5em;
  height: 100%;
}
button.list{
  position: relative;
  width: 3em;
  height: 3em;
  margin-left: 1em;
}
.play img, .pause img, .prev img, .next img, .list img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.play img{
  width: 3.5em;
}
.pause img, .prev img, .next img{
  width: 1.75em;
}
.list img{
  width: 70%;
}
.cb-right button.play, .cb-right button.pause{
  width: 4em;
  height: 4em;
}
#pause, #pause2{
  display: none;
}

@media only screen and (max-width: 400px){
  .play img{
    width: 3em;
  }
}
@media only screen and (max-width: 375px){
  .pause img, .prev img, .next img{
    width: 1.5em;
  }
  .cb-right button.play, .cb-right button.pause{
    margin: 0.25em;
  }
  .cb-inner{
    padding: .25em .6em;
  }
}