:root {
  --space: 1em;
  --font-family: 'Roboto', sans-serif;
  --color-light: rgb(175, 175, 175);
  --color-light_accent: rgb(250, 250, 250);
  --color-medium: rgb(100, 100, 100);
  --color-medium_accent: rgb(50, 50, 50);
  --color-dark: rgb(25, 25, 25);
  --color-dark_accent: rgb(50, 50, 50);
  --border-radius: 4px;
  --border: 2px solid black;
  --box-shadow: 0 2px 2px rgba(25, 25, 25, 0.25);
  --box-shadow_inset: 0 2px 2px rgba(25, 25, 25, 0.25) inset;
}

/*DEFAULT STYLES FOR DISPLAY*/
*,*:before,*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--color-light);
}

/* #region loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
}

.loader:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-color: var(--color-medium) transparent var(--color-medium) transparent;
  -webkit-animation: loaderspin 1.2s linear infinite;
          animation: loaderspin 1.2s linear infinite;
}

@-webkit-keyframes loaderspin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loaderspin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* #endregion loader */
/* #region volume range input */
input[type=range].volume {
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}
input[type=range].volume:focus {
  outline: none;
}
input[type=range].volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
          box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
  background: rgba(175, 175, 175, 0.64);
  border-radius: 2.5px;
  border: 0.25px solid #191919;
}
input[type=range].volume::-webkit-slider-thumb {
  -webkit-box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
          box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
  border: 0.25px solid #191919;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background: #afafaf;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.25px;
}
input[type=range].volume:focus::-webkit-slider-runnable-track {
  background: rgba(201, 201, 201, 0.64);
}
input[type=range].volume::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
  background: rgba(175, 175, 175, 0.64);
  border-radius: 2.5px;
  border: 0.25px solid #191919;
}
input[type=range].volume::-moz-range-thumb {
  box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
  border: 0.25px solid #191919;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background: #afafaf;
  cursor: pointer;
}
input[type=range].volume::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].volume::-ms-fill-lower {
  background: rgba(150, 150, 150, 0.64);
  border: 0.25px solid #191919;
  border-radius: 5px;
  box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
}
input[type=range].volume::-ms-fill-upper {
  background: rgba(175, 175, 175, 0.64);
  border: 0.25px solid #191919;
  border-radius: 5px;
  box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
}
input[type=range].volume::-ms-thumb {
  box-shadow: 1px 1px 7.5px #191919, 0px 0px 1px #262626;
  border: 0.25px solid #191919;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background: #afafaf;
  cursor: pointer;
  height: 5px;
}
input[type=range].volume:focus::-ms-fill-lower {
  background: rgba(175, 175, 175, 0.64);
}
input[type=range].volume:focus::-ms-fill-upper {
  background: rgba(201, 201, 201, 0.64);
}
/* #endregion range input */
/* #region speaker */
.cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2.5em;
	height: 2.5em;
}

.icon {
  position: relative;
	margin:auto;
}

/*THE ARTIFAKT ;) */
.speaker {
  width:0;
	height:0;
	background:none;
	border-top: calc(4em/5) solid transparent;
	border-bottom: calc(4em/5) solid transparent;
	border-right: calc(5em/5) solid var(--color-light);

}
.speaker:before {
  content:"";
	position:absolute;
	top: calc(-1.3em/5);
	left:0;
	width: calc(5.8em/5);
	height: calc(2.5em/5);
	background: var(--color-light);
	border-radius:3px 1.5em 1.5em 3px;
}
.speaker:after {
  content:"";
	position:absolute;
	border-right:0.5em solid var(--color-light);
	border-radius:50%;
	/*animation*/
	/* -webkit-animation:pump 0.1s 0.1s infinite alternate;
  -moz-animation:pump 0.1s 0.1s infinite alternate;
  -ms-animation:pump 0.1s 0.1s infinite alternate;
  -o-animation:pump 0.1s 0.1s infinite alternate;
  animation:pump 0.1s 0.1s infinite alternate; */
}
/* @-webkit-keyframes pump {
  from{
    top:-1.4em;
		right:-7em;
		width:2.5em;
		height:2.5em;
	}
  to{
    top:-1.8em;
		right:-8em;
		width:3.5em;
		height:3.5em;
  }
}
@-moz-keyframes pump {
  from{
    top:-1.4em;
		right:-7em;
		width:2.5em;
		height:2.5em;
	}
  to{
    top:-1.8em;
		right:-8em;
		width:3.5em;
		height:3.5em;
  }
}
@-ms-keyframes pump {
  from{
    top:-1.4em;
		right:-7em;
		width:2.5em;
		height:2.5em;
	}
  to{
    top:-1.8em;
		right:-8em;
		width:3.5em;
		height:3.5em;
  }
}
@-o-keyframes pump {
  from{
    top:-1.4em;
		right:-7em;
		width:2.5em;
		height:2.5em;
	}
  to{
    top:-1.8em;
		right:-8em;
		width:3.5em;
		height:3.5em;
  }
}
@keyframes pump {
  from{
    top:-1.4em;
		right:-7em;
		width:2.5em;
		height:2.5em;
	}
  to{
    top:-1.8em;
		right:-8em;
		width:3.5em;
		height:3.5em;
  }
} */
/* #endregion speaker */

.app-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: fixed;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-dark);
}

.section-header {
  margin: 0 0 1em;
  font-size: .75em;
  color: var(--color-medium);
  text-transform: uppercase;
}

.player {
  width: 100%;
  padding: var(--space);
  max-height: 50%;
}

.player__info {
  position: relative;
  min-height: 5em;
  margin-bottom: 1em;
  overflow: hidden;
}

.song-info__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.album-cover, .album-cover__reflection {
  display: block;
  width: 50%;
  padding-right: var(--space);
}

.cover__image, .cover__reflection {
  width: 100%;
}

.song-info__wrapper-reflection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 2em;
  opacity: .5;
  -webkit-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skewX(65deg);
      -ms-transform: skewX(65deg);
          transform: skewX(65deg);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(25%, transparent), color-stop(75%, black));
  -webkit-mask-image: -webkit-linear-gradient(bottom, transparent 25%, black 75%);
  mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(25%, transparent), color-stop(75%, black));
  mask-image: linear-gradient(to top, transparent 25%, black 75%);
}

.artist, .album, .song {
  width: 100%;
  font-size: .5em;
  font-weight: bold;
  color: var(--color-medium);
}

.artist div, .album div, .song div {
  padding: .1em 0em .25em .25em;
  font-size: .75rem;
  font-weight: normal;
  color: var(--color-light);
  text-shadow: .25em .25em 0em rgba(255, 255, 255, 0.1);
}

.song-info__reflection, .cover__reflection {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.controls {
  position: relative;
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius);
  background-color: var(--color-dark_accent);
  padding: .5em;
}

.controls__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: center;
      align-content: center;
  font-size: .75em;
  background: transparent;
}

.time__now, .time__remaining {
  padding: 0 .5em;
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  position: relative;
  top: .25em;
  height: .5em;
  -webkit-transition: height 0.25s;
  -o-transition: height 0.25s;
  transition: height 0.25s;
  background:var(--color-light);
  -webkit-box-shadow: var(--box-shadow_inset);
          box-shadow: var(--box-shadow_inset);
  cursor: pointer;
}

.progress__filled {
  width:50%;
  background: var(--color-dark);
  -webkit-box-flex:0;
      -ms-flex:0;
          flex:0;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.controls__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.previous {
  display: none;
  width: .25em;
  height: .25em;
  border-color: transparent transparent transparent var(--color-light);
  border-style: solid;
  border-width: .5em 0 .5em 1em;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.previous::before {
  display: none;
  position: relative;
  top: -.66em;
  content: "";
  border-color: transparent transparent transparent var(--color-light);
  border-style: solid;
  border-width: .1em;
}

.next {
  display: none;
  width: .25em;
  height: .25em;
  border-color: transparent transparent transparent var(--color-light);
  border-style: solid;
  border-width: .5em 0 .5em 1em;
}

.next::after {
  display: none;
  position: relative;
  top: -.66em;
  content: "";
  border-color: transparent transparent transparent var(--color-light);
  border-style: solid;
  border-width: .1em;
}

.play {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2.5em;
  height: 2.5em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  cursor: pointer;
}

.play-pause {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 1em;
  height: 1em;
  border-color: transparent transparent transparent var(--color-light);
  -webkit-transition: 125ms all ease;
  -o-transition: 125ms all ease;
  transition: 125ms all ease;
  border-style: solid;
  border-width: .5em 0 .5em 1em;
}

.pause {
  height: 1em;
  border-style: double;
  border-width: 0 0 0 .75em;
}

.volume-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 6em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.volume {
  background: transparent;
}

.mute {
  display: none;
}
.autoplay {
  display: none;
}
.shuffle {
  display: none;
}

.selector {
  position: relative;
  width: 100%;
  padding: var(--space);
}

.select-list {
  position: relative;
 max-height: calc(100% - 1.75em);  /* - section header */
  overflow-y: auto;
}

.selector img {
  width: 2.5em;
  height: 2.5em;
  margin-right: 1em;
}

.selector-album {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: .5em 0;
  padding: .5em;
  border-radius: var(--border-radius);
  font-size: 1.2em;
  background-color: var(--color-dark_accent);
}

.selector-album:hover {
  cursor: pointer;
}

.selector-album ol {
  display: none;
}

.song-list {
  max-height: 0;
  -webkit-transition: max-height .5s ease-out;
  -o-transition: max-height .5s ease-out;
  transition: max-height .5s ease-out;
  overflow: hidden;
}

.show-songs {
  max-height: 500px;
  -webkit-transition: max-height 0.5s ease-in;
  -o-transition: max-height 0.5s ease-in;
  transition: max-height 0.5s ease-in;
}

ol li:active {
  color: var(--color-dark_accent);
}

ol li:hover {
  cursor: pointer;
  color: var(--color-light_accent);
  font-size: calc(1em * 1.1)
}

@media (min-width: 600px), (orientation: landscape)  {
  .player, .selector {
    width: 50%;
  }

  .artist, .album, .song {
    font-size: .75em;

  }

  .artist div, .album div, .song div {
    font-size: 1rem;
  }
}