html, body {
  margin: 0;
  padding: 0;
}

html {
  background-color: #481286;
}

body {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background: linear-gradient(-45deg, #311286, #521286, #9719a3, #c219b9, #b61d6e, #ce1653);
  background-size: 300% 300%;
  -webkit-animation: gradient 30s ease infinite;
          animation: gradient 30s ease infinite;
  font-family: 'Montserrat', sans-serif;
}

.nav ul {
  list-style: none;
  background-color: #481286;
  text-align: center;
  padding: 0;
  margin: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
}

.nav li {
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #FFE900;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  -webkit-transition: .3s background-color;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #bc60e0;
  color: #481286;
  font-weight: bold;
}

.nav a:active {
  background-color: #7734ad;
  color: #FFE900;
  cursor: default;
  font-weight: bold;
}

.nav a.active-page {
  background-color: #7734ad;
  color: #FFE900;
  cursor: default;
  font-weight: bold;
}

h1, h2 {
  font-family: 'Archivo Black', sans-serif;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  color: #FFE900;
  -webkit-text-stroke-width: 0.3vw;
  -webkit-text-stroke-color: black;
}

h1 {
  font-size: 8vw;
}

h2 {
  font-size: 5vw;
}

h3 {
  padding: 0;
  margin: 0;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

*, ::before, ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#npAction {
  padding: 60px 20px 0 0;
}

#npAction img {
  float: left;
  height: 270px;
  padding: 0 20px 10px 20px;
}

#description {
  height: 260px;
  padding: 0;
  font-size: 15px;
  font-weight: normal;
  overflow: auto;
  margin: 0;
}

/* width */
#description::-webkit-scrollbar {
  width: 15px;
}

/* Track */
#description::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px #bebebe;
          box-shadow: inset 0 0 5px #bebebe;
  border-radius: 15px;
}

/* Handle */
#description::-webkit-scrollbar-thumb {
  background: #913695;
  border-radius: 10px;
}

/* Handle on hover */
#description::-webkit-scrollbar-thumb:hover {
  background: #b048b6;
}

/* Setup
    ================================================== */
.container {
  position: relative;
  margin: 20px auto;
  max-width: 800px;
  width: 100%;
}

.credits {
  width: inherit;
  padding: 20px;
}

/* Misc.
    ================================================== */
.add-bottom {
  margin-bottom: 2rem !important;
}

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

.no-support {
  margin: 2rem auto;
  text-align: center;
  width: 90%;
}

/* Audio Player Styles
    ================================================== */
audio {
  display: none;
}

#audiowrap,
#plwrap {
  margin: 0 auto;
}

#tracks {
  font-size: 0;
  position: relative;
  text-align: center;
}

#nowPlay span {
  display: block;
  font-size: 1.55rem;
  font-weight: normal;
}

span#npTitle {
  text-align: center;
  display: block;
  font-size: 20px;
  font-style: italic;
  padding: 0 0 20px 0;
}

#plList {
  margin: 0;
  padding: 10px;
}

#plList li {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 5px 0;
}

#plList li:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

#plList li:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.plItem {
  position: relative;
}

.plTitle {
  left: 50px;
  overflow: hidden;
  position: absolute;
  right: 65px;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
}

.plNum {
  padding-left: 21px;
  width: 25px;
}

.plLength {
  padding-left: 21px;
  position: absolute;
  right: 21px;
  top: 0;
}

.plSel {
  color: #FFE900;
}

.plSel,
.plSel:hover {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: default !important;
}

#tracks a {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  height: auto;
  margin: 0;
  padding: 0 12px;
  text-decoration: none;
  -webkit-transition: background .3s ease;
  transition: background .3s ease;
}

#tracks a:hover,
#tracks a:active {
  color: #FFE900;
}

#tracks a::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Plyr Overrides
    ================================================== */
.plyr__controls {
  border-radius: 15px !important;
  background: black;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), color-stop(8%, rgba(28, 5, 38, 0.2)), color-stop(48%, rgba(55, 20, 71, 0.2)), color-stop(91%, rgba(87, 32, 135, 0.2)), color-stop(98%, rgba(145, 105, 209, 0.2))) !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(28, 5, 38, 0.2) 8%, rgba(55, 20, 71, 0.2) 48%, rgba(87, 32, 135, 0.2) 91%, rgba(145, 105, 209, 0.2) 98%) !important;
}

.plyr--audio .plyr__controls {
  background-color: transparent;
  border: none;
  color: #fff;
  font-family: "Source Sans Pro", arial, sans-serif;
  width: 100%;
}

a.plyr__controls__item.plyr__control:hover,
.plyr--audio .plyr__controls button:hover,
.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr__play-large {
  background-color: rgba(0, 0, 0, 0.1);
}

.plyr__progress--played,
.plyr__volume--display {
  color: rgba(0, 0, 0, 0.1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
  background-color: rgba(0, 0, 0, 0.1);
}

.plyr--audio .plyr__progress--buffer {
  color: rgba(0, 0, 0, 0.1);
}

.plyr--full-ui input[type="range"] {
  width: calc(100%);
  color: #FFE900;
}

.plyr__controls .plyr__controls__item.plyr__time {
  font-size: 14px;
}

.dlLink {
  display: block;
  text-align: center;
  color: #FFE900;
  font-size: large;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

@media only screen and (max-width: 600px) {
  #nowPlay span#npAction {
    display: none;
  }
  span#npTitle {
    display: block;
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 0 0 20px 0;
    font-style: italic;
  }
}

h1 {
  padding: 180px 0 0 0;
}

.player {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background-color: #501766;
  color: #fff;
  font-size: 1rem;
  font-family: "Source Sans Pro", arial, sans-serif;
  font-weight: 200;
  width: 100%;
  margin: 0 auto;
}

footer {
  background-color: #481286;
  position: relative;
  left: 0;
  bottom: 0;
  height: 70px;
  width: 100%;
  color: white;
  text-align: center;
  padding: 25px;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
  }
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  h1, h2 {
    -webkit-text-stroke-width: 1.5px;
  }
  h1 {
    font-size: 60px;
    padding: 60px 0 0 0;
  }
  h2 {
    font-size: 30px;
  }
  .player {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background-color: #501766;
    color: #fff;
    font-size: 1rem;
    font-family: "Source Sans Pro", arial, sans-serif;
    font-weight: 200;
    width: 70%;
    margin: 0 auto;
  }
}
/*# sourceMappingURL=album.css.map */