body {
  background: #333;
  color: #fff;
  position: relative; }

header {
  text-align: center; }

header img {
  margin-top: 15px; }

.container {
  width: 970px; }

.input-group {
  margin: 20px auto;
  max-width: 50%; }

.release-result {
  margin-top: 20px; }

.thumbnail {
  background-color: transparent;
  border: none;
  margin-bottom: 10px;
  padding: 0; }
  .thumbnail + ul {
    margin-bottom: 14px; }

.audio-player {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  height: 80px;
  left: 0;
  padding: 0 20px;
  position: fixed;
  width: 100%;
  z-index: 9999; }
  .audio-player > div:not(:first-child) {
    padding-left: 20px; }

audio {
  width: 100%; }

.artwork {
  width: 5%; }

.meta {
  font-size: 12px;
  width: 30%; }
  .meta ul {
    margin: 0; }

.player {
  width: 65%; }

.artwork > img {
  height: auto;
  max-width: 100%; }

.playlist {
  background: #222;
  border: 1px solid #000; }
  .playlist li {
    border-bottom: 1px solid #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 20px; }
    .playlist li:hover {
      background: rgba(255, 255, 255, 0.05); }
      .playlist li:hover .play {
        opacity: 1; }
    .playlist li:first-child {
      border-top: none; }
    .playlist li:last-child {
      border-bottom: none; }
    .playlist li .play {
      opacity: 0; }

.pause {
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px; }

.play {
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  width: 20px; }
  .play img {
    opacity: 0.35; }
  .play:hover img {
    opacity: 1.0; }

.star {
  display: inline-block;
  float: right;
  height: 20px;
  margin-right: 10px;
  width: 20px; }
  .star img {
    opacity: 0.0; }
  .star:hover img {
    opacity: 1.0; }