/*ANIMATIONS*/
/*headpump*/
.pmp {
  animation: pmp;
  animation-iteration-count: infinite;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
}
/*rotation; unused, but good for other things*/
.rt1 { animation: rt1;
  animation-iteration-count: infinite;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
}
.rt2 { animation: rt2 !important; 
  animation-iteration-count: infinite !important;
  animation-duration: 7s !important;
  animation-timing-function: ease-in-out !important;
}
@keyframes rt1 {
  0% {transform: scale(1,1)}
  25% {transform: scale(0,1)}
  26% {transform: scale(0,1)}
  70% {transform: scale(0,1)}
  71% {transform: scale(0,1);}
  100% {transform: scale(1,1)}
}
@keyframes rt2 {
  0% {transform: scale(0,1)}
  25% {transform: scale(0,1)}
  26% {transform: scale(0,1)}
  50% {transform: scale(1,1)}
  70% {transform: scale(0,1)}
  71% {transform: scale(0,1);}
  100% {transform: scale(0,1)}
}
@keyframes pmp {
  0% {transform: rotate(0deg) translate(0,0);}
  100% {transform: rotate(2deg) translate(0,2px);}
}

/*VISUAL COMPONENTS*/

/*head neutral*/.listener{
  background-image: url(../img/mat/listenersleep.png);
  background-size: 100% 100%;
  width: 175px;
  height: 175px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
/*head jammin'*/.listenerjam{ 
  background-image: url(../img/mat/listenerjoy.png);
  background-size: 100% 100%;
  width: 175px;
  height: 175px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
/*container*/.mpbody {
  padding: 20px;
  width: 600px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5vh;
  background-image: url("../img/mat/musicplayerbody.png");
  background-size: 100% 100%;
}
/*border styling*/.musicplayer{
  border: 5px double #a7a7a759;
  background-color: #000000e0;
}
  /* (A) MATERIAL ICONS */.material-icons {
    font-size: 28px;
    color: #767676;
  }
  /* (B) WRAPPER */#aWrap {
    font-family: 'Courier Prime', monospace;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: 2px;
    margin: auto;
  }
  /* (C) PLAY/PAUSE BUTTON */#aPlay {
    padding: 0;
    margin: 0;
    background: 0;
    border: 0;
    cursor: pointer;
  }
  /* (D) TIME */#aCron {
    font-size: 14px;
    color: #c7d5dc;
  }
  /* (E) RANGE SLIDERS */
  /* (E1) HIDE DEFAULT */
  #aWrap input[type="range"] {
    box-sizing: border-box;
    appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
    width: 100px;
    padding: 0;
    margin: 0;
    background: 0;
  }
  #aWrap input[type="range"]::-webkit-slider-thumb {
    appearance: none;
  }
  /* (E2) CUSTOM SLIDER TRACK */
  #aWrap input[type=range]::-webkit-slider-runnable-track {
    background: #343434;
  }
  #aWrap input[type=range]::-moz-range-track {
    background: #343434;
  }
  /* (E3) CUSTOM SLIDER BUTTON */
  #aWrap input[type=range]::-webkit-slider-thumb {
    width: 10px; height: 10px;
    border-radius: 0%;
    border: 0;
    background: #767676;
  }
  #aWrap input[type=range]::-moz-range-thumb {
    width: 10px; height: 10px;
    border-radius: 0%;
    border: 0;
    background: #767676;
  }
  /* (F) VOLUME */#aVolIco {
    margin: 0 10px;
    cursor: pointer;
  }
  /* (G) PLAYLIST */
  #aList {
    width: 100%;
    padding: 2px;
    margin: auto;
    color: #7a7a7a;
    border: solid #292929 5px;
    border-style: solid none none none;
    height: 200px;
    overflow: scroll;
  }
  .aRow {
    cursor: pointer;
    padding: 3px 0;
  }
  .aRow.now {
    color: #ffffff;
  }