* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inconsolata', monospace;
  background-color: #000;
  position: relative;
  background: center center/cover no-repeat;
  overflow-x: hidden;
}

.content {
  padding: 50px 0;
}

.album-promo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.album-promo img {
  max-width: 100%;
  transition: all linear 0.2s;
}
.album-promo .cover-link {
  display: block;
  position: absolute;
  width: calc(100% - 30px);
  height: 100%;
}

.album-promo .detail-link {
  padding: 35px 0;
  width: calc(100% - 30px);
  text-align: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 28px;
  margin-top: 100px;
  transition: all linear 0.2s;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.downloads {
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  align-items: center;
  justify-content: flex-end;
}
.downloads .dl-zip,
.downloads .dl-mp3 {
  padding: 35px 0;
  width: calc(100% - 30px);
  text-align: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 28px;
  transition: all linear 0.2s;
  text-decoration: none;
}
.downloads .dl-zip {
  margin-bottom: 50px;
}
.album-promo .detail-link:hover,
.downloads .dl-zip:hover,
.downloads .dl-mp3:hover {
  background-color: rgba(110, 20, 99, 0.5);
}
.downloads .dl-zip:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\e95e';
  margin-left: 0.5em;
}
.downloads .dl-mp3:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\e928';
  margin-left: 0.5em;
}

.album-promo:hover img {
  box-shadow: 0px 0px 70px 20px rgba(255, 255, 255, 0.3);
}

.album-detail {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.album-detail img {
  max-width: 100%;
  transition: all linear 0.2s;
  box-shadow: 0px 0px 70px 20px rgba(255, 255, 255, 0.3);
}

/* album media-queries */
@media screen and (min-width: 576px) and (max-width: 991px) {
  .album-promo {
    margin-bottom: 100px;
  }
}
@media screen and (min-width: 576px) {
  .album-promo .detail-link {
    display: none;
  }
}
@media screen and (max-width: 575px) {
  .album-promo img,
  .album-detail img {
    max-width: calc(100% - 30px);
  }
}
@media screen and (max-width: 991px) {
  .album-detail {
    margin-bottom: 60px;
  }
}

.promo-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.promo-text h1 {
  text-align: center;
  color: #fff;
  font-size: 65px;
}
.promo-text h1 span {
  text-transform: uppercase;
  font-weight: 700;
}
.promo-text a {
  padding: 35px 0;
  width: calc(100% - 30px);
  text-align: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 28px;
  margin-top: 100px;
  transition: all linear 0.2s;
  text-decoration: none;
}

.promo-text-small a {
  padding: 15px 0;
  font-size: 20px;
}

.promo-text a:hover {
  background-color: rgba(110, 20, 99, 0.5);
}

/* album promo text media-queries */
@media screen and (max-width: 575px) {
  .promo-text {
    display: none;
  }
}

.icons {
  height: 100%;
  margin-top: 80px;
  /* border-top: 3px solid #fff; */
  max-height: 100px;
}
.icons .row {
  height: 100%;
}
.icon-container {
  font-size: 80px;
  color: #fff;
  display: flex;
  justify-content: center;
}

.icons-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 450px;
}
.icons-detail .icon-container {
  margin-bottom: 60px;
}

/* social icons media-queries */
@media screen and (max-width: 991px) {
  .icons {
    max-height: 280px;
  }
  .icon-container {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 576px) {
  .icons-detail .icon-container:nth-last-child(-n + 3) {
    margin-bottom: 0;
  }
}
.icon-container:before {
  transform: scale(1);
  transition: color linear 0.1s;
  transition: transform linear 0.1s;
}
.icon-container:hover:before {
  transform: scale(1.1);
}

.icon-container.spotify:before {
  content: '\ea94';
}
.icon-container.spotify:hover:before {
  color: #1db954;
}
.icon-container.youtube:before {
  content: '\ea9d';
}
.icon-container.youtube:hover:before {
  color: #ff0000;
}
.icon-container.instagram:before {
  content: '\ea92';
}
.icon-container.instagram:hover:before {
  background: -webkit-linear-gradient(
    -45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d,
    #f56040,
    #f77737,
    #fcaf45,
    #ffdc80
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-container.bandcamp:before {
  content: '\e903';
}
.icon-container.bandcamp:hover:before {
  color: #629aa9;
}
.icon-container.discord:before {
  content: '\e900';
}
.icon-container.discord:hover:before {
  color: #7289da;
}
.icon-container.apple-music:before {
  content: '\e901';
}
.icon-container.soundcloud:before {
  content: '\eac4';
}
.icon-container.soundcloud:hover:before {
  background: -webkit-linear-gradient(#ff8800, #ff3300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-container.tidal:before {
  content: '\e902';
}
.icon-container.tidal:hover:before {
  color: #000;
}
.icon-container a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
@media screen and (max-width: 450px) {
  .icon-container:before {
    font-size: 60px;
  }
}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .about {
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  cursor: pointer;
}
footer .about-container {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 100;
  background-color: #fff;
  bottom: 0;
  transform: scale(0);
  opacity: 0;
  transition: all ease-in 0.15s;
}
@media screen and (min-width: 992px) {
  footer .about-container {
    bottom: 0px;
  }
}
footer .about-container.open {
  transform: scale(1);
  opacity: 1;
}
footer .about-container p {
  color: #000;
}
footer .about-container span {
  font-weight: 700;
  text-transform: uppercase;
}
footer .about-container span.close {
  position: absolute;
  right: 10px;
  top: 10px;
  text-transform: unset;
  cursor: pointer;
}
@media screen and (max-width: 575px) {
  footer .about-container span.close {
    right: 20px;
  }
}
/* .cover-close {
  display: none;
  position: absolute;
  z-index: 90;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
} */

/* ------------------Audio Player-------------------- */

.player {
  margin-top: 60px;
}

div.control-container {
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
div.control-container .prev-next {
  display: flex;
  width: 3em;
  justify-content: space-between;
}
div.control-container div.amplitude-play-pause,
div.control-container div.amplitude-prev,
div.control-container div.amplitude-next {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
div.control-container div.amplitude-play-pause.amplitude-paused:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\ea1c';
  color: #fff;
  font-size: 25px;
}
div.control-container div.amplitude-play-pause.amplitude-playing:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\ea1d';
  color: #fff;
  font-size: 25px;
}
div.control-container div.amplitude-prev:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\ea1f';
  color: #fff;
  font-size: 25px;
}
div.control-container div.amplitude-next:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\ea20';
  color: #fff;
  font-size: 25px;
}

div.time-container {
  font-size: 14px;
  color: #fff;
  height: 15px;
  display: flex;
  padding-top: 5px;
}
div.time-container span.song-name {
  margin-left: 10px;
}

progress.amplitude-song-played-progress {
  background-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  display: block;
  cursor: pointer;
  border: none;
}
progress.amplitude-song-played-progress:not([value]) {
  background-color: #fff;
}

progress[value]::-webkit-progress-bar {
  background-color: #fff;
}

progress[value]::-moz-progress-bar {
  background-color: #6e1e63;
}

progress[value]::-webkit-progress-value {
  background-color: #6e1e63;
}

div#single-song-player {
  margin: auto;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 575px) {
  .player {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  div#single-song-player {
    width: calc(100% - 30px);
  }
}

#list {
  margin-top: 30px;
  border: 3px solid #fff;
}
#list .song {
  display: flex;
  padding: 10px 5px;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid #fff;
  align-items: center;
}
#list .song:hover {
  cursor: pointer;
}
#list .song .song-meta-container {
  display: flex;
  align-items: center;
}
#list .song .song-meta-container .number {
  color: #fff;
  margin-right: 1em;
}
#list .song .song-meta-container .song-name {
  color: #fff;
}
#list .song .song-meta-container .download {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: calc(0% + 35px);
  z-index: 20;
}
#list .song .song-meta-container .download:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\e9c7';
  color: #fff;
  font-size: 1.5rem;
  transition: color linear 0.1s;
}
#list .song:hover .song-meta-container .download:after {
  color: #000;
}
#list .song .song-meta-container .download a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

div.song div.song-now-playing-icon-container {
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
div.song div.song-now-playing-icon-container .now-playing {
  display: none;
}
div.song div.play-button-container {
  display: none;
  width: 20px;
  height: 20px;
}
div.song:hover:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\ea15';
  font-size: 20px;
  color: #000;
  position: absolute;
}
div.song.amplitude-active-song-container
  div.song-now-playing-icon-container
  .now-playing {
  display: block;
  width: 20px;
  height: 20px;
}
div.song.amplitude-active-song-container
  div.song-now-playing-icon-container
  .now-playing:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  content: '\ea27';
  color: #fff;
  font-size: 20px;
}
div.song.amplitude-active-song-container:hover div.play-button-container {
  display: none;
}

@media screen and (max-width: 575px) {
  #list .song {
    font-size: 30px;
  }
  div.song.amplitude-active-song-container
    div.song-now-playing-icon-container
    .now-playing:after {
    font-size: 30px;
  }
  div.song.amplitude-active-song-container div.song-now-playing-icon-container {
    width: 30px;
    height: 30px;
  }
  div.song:hover:before {
    font-size: 30px;
  }
  div.song.song-now-playing-icon-container {
    margin-right: 20px;
  }
  #list .song .song-meta-container .download {
    right: calc(0% + 50px);
  }
  div.time-container {
    font-size: 20px;
  }
  div.control-container div.amplitude-play-pause,
  div.control-container div.amplitude-prev,
  div.control-container div.amplitude-next {
    width: 35px;
    height: 35px;
  }
  div.control-container div.amplitude-play-pause.amplitude-paused:after,
  div.control-container div.amplitude-play-pause.amplitude-playing:after {
    font-size: 35px;
  }
  div.control-container div.amplitude-prev:after,
  div.control-container div.amplitude-next:after {
    font-size: 35px;
  }
  div.control-container .prev-next {
    width: 4em;
  }
  #list {
    margin-top: 40px;
  }
}

div.backlink {
  margin-bottom: 30px;
}
a.backlink {
  margin: 30px 0;
  color: #fff;
  font-size: 20px;
}
a.backlink:hover {
  color: #fff;
}

@media screen and (max-width: 575px) {
  a.backlink {
    padding-left: 15px;
  }
}

.cover-small {
  width: 50%;
}

h2 {
  color: white;
}