.blur {
  display: grid;
  grid-template-columns: repeat(64, 18px);
  grid-template-rows: repeat(64, 18px);
}


.fader {
  display: grid;
  grid-template-columns: repeat(64, 10px);
  grid-template-rows: repeat(64, 10px);
}

.gal {
  display: grid;
  grid-template-columns: repeat(10, 150px);
  grid-template-rows: repeat(10, 200px);
}

.flood {
  display: flex;
  justify-content: center;
  align-items: center;
}

.audio-player {
  background: white;
  border: 1px solid lighten(#acacac, 20%);
  width: 50vw;
  text-align: center;
  display: flex;
  flex-flow: row;
  margin: 4rem 0 4rem 0;
  .album-image {
    min-height: 100px;
    width: 110px;
    background-size: cover;
  }
  .player-controls {
    align-items: center;
    justify-content: center;
    margin-top: 2.5rem;
    flex: 3;
    progress {
      width: 90%;
    }
    progress[value] {
      -webkit-appearance: none;
      appearance: none;
      background-color: white;
      color: blue;
      height: 5px;
    }
    progress[value]::-webkit-progress-bar {
      background-color: white;
      border-radius: 2px;
      border: 1px solid lighten(#acacac, 20%);
      color: blue;
    }
    progress::-webkit-progress-value {
      background-color: blue;
    }
    p {
      font-size: 1.6rem;
    }
  }
  #play-btn {
    background-image: url('https://cdn.fastly.picmonkey.com/content4/previews/arrows_2/arrows_2_44_550.png');
    background-size: cover;
    width: 75px;
    height: 75px;
    margin: 2rem 0 2rem 2rem;
    &.pause {
      background-image: url('https://img.icons8.com/ios/452/circled-pause.png');
    }
  }
}