/* line 15, scss/main.scss */
html {
  height: 100%;
}

/* line 19, scss/main.scss */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: calc(100% - 25px);
  height: -webkit-calc(100% - 25px);
  height: -moz-calc(100% - 25px);
  background: linear-gradient(to top, #ffdfff, #d5edfb, #d4fff6);
}
/* line 26, scss/main.scss */
body:before {
  background-image: linear-gradient(to top, #ff6487, #b54dd0, #006dff);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  animation: gradientfade 300s ease-in;
  animation-fill-mode: forwards;
  z-index: -1;
}

@keyframes gradientfade {
  /* line 42, scss/main.scss */
  0% {
    opacity: 0;
  }

  /* line 43, scss/main.scss */
  100% {
    opacity: 1;
  }
}

@keyframes sleepywave {
  /* line 47, scss/main.scss */
  0% {
    -webkit-transform: translate(10px, -10px);
  }

  /* line 48, scss/main.scss */
  50% {
    -webkit-transform: translate(0px, 10px);
  }

  /* line 49, scss/main.scss */
  100% {
    -webkit-transform: translate(10px, -10px);
  }
}

@keyframes pinkfade {
  /* line 53, scss/main.scss */
  0% {
    background-color: #ff7bc6;
  }

  /* line 54, scss/main.scss */
  100% {
    background-color: #8dd6ff;
  }
}

/* line 57, scss/main.scss */
.sleepytext {
  text-align: center;
  font-family: 'Rouge Script', cursive;
  font-size: 14vw;
  color: #030644;
  padding-top: 30vh;
}
/* line 63, scss/main.scss */
.sleepytext span {
  display: inline-block;
  margin: -30px;
  padding: 30px;
}
/* line 68, scss/main.scss */
.sleepytext span:nth-child(1) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -1.8s;
}
/* line 69, scss/main.scss */
.sleepytext span:nth-child(2) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -1.6s;
}
/* line 70, scss/main.scss */
.sleepytext span:nth-child(3) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -1.4s;
}
/* line 71, scss/main.scss */
.sleepytext span:nth-child(4) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -1.2s;
}
/* line 72, scss/main.scss */
.sleepytext span:nth-child(5) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -1s;
}
/* line 73, scss/main.scss */
.sleepytext span:nth-child(6) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -0.8s;
}
/* line 74, scss/main.scss */
.sleepytext span:nth-child(7) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -0.6s;
}
/* line 75, scss/main.scss */
.sleepytext span:nth-child(8) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -0.4s;
}
/* line 76, scss/main.scss */
.sleepytext span:nth-child(9) {
  animation: sleepywave 8s ease-in-out infinite;
  animation-delay: -0.2s;
}

/* line 79, scss/main.scss */
#playerW:after {
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  background-image: linear-gradient(to right, rgba(3, 6, 68, 0), #030644, rgba(3, 6, 68, 0));
}

/* line 89, scss/main.scss */
#player {
  animation: colorchange 50s;
  background: linear-gradient(to right, #ffdfff, #d5edfb, #d4fff6);
}
/* line 92, scss/main.scss */
#player:before {
  background-image: linear-gradient(to right, #ff6487, #b54dd0, #006dff);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  animation: gradientfade 300s ease-in;
  animation-fill-mode: forwards;
}
/* line 104, scss/main.scss */
#player .text, #player .jp-scrollingtext {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #030644;
  text-transform: uppercase;
  font-weight: normal;
}
/* line 111, scss/main.scss */
#player .text {
  top: 3px;
}
/* line 114, scss/main.scss */
#player a {
  color: #030644;
}
/* line 117, scss/main.scss */
#player #timer {
  font-family: Verdana, sans-serif;
}
/* line 120, scss/main.scss */
#player #seekerBase, #player #volume {
  background-color: rgba(3, 6, 68, 0.15);
  border: none;
  height: 4px;
  z-index: 1;
  top: 10px;
}
/* line 127, scss/main.scss */
#player #seekerBuffered {
  height: 4px;
  z-index: 2;
  top: 10px;
  animation: pinkfade 300s ease-in;
  animation-fill-mode: forwards;
}
/* line 134, scss/main.scss */
#player #seekerSliderBase, #player #volumeSlider {
  background-color: #030644;
  height: 10px;
  width: 10px;
  border-radius: 5px;
}
/* line 140, scss/main.scss */
#player #seekerSliderBase {
  top: 7px;
}
/* line 143, scss/main.scss */
#player #volumeSlider {
  top: -3px;
}

/* line 149, scss/main.scss */
#player .button, #player #repeatButton, #player #repeatOnceButton, #player #repeatAllButton, #player #shuffleButtonOn, #player #shuffleButtonOff {
  top: 5px;
  width: 14px;
  height: 14px;
}
/* line 154, scss/main.scss */
#player #previous, #player #pause, #player #play, #player #next, #player #list {
  background-position: 0 !important;
}
/* line 155, scss/main.scss */
#player #previous {
  left: 8px;
  background-image: url("../images/back.svg");
}
/* line 156, scss/main.scss */
#player #pause {
  left: 32px;
  background-image: url("../images/pause.svg");
}
/* line 157, scss/main.scss */
#player #play {
  left: 31px;
  background-image: url("../images/play.svg");
}
/* line 158, scss/main.scss */
#player #next {
  left: 55px;
  background-image: url("../images/next.svg");
}
/* line 159, scss/main.scss */
#player #list {
  right: 8px;
  background-image: url("../images/list.svg");
}
/* line 160, scss/main.scss */
#player #repeatButton {
  left: 88px;
  background-image: url("../images/repeat.svg");
  opacity: .4;
}
/* line 161, scss/main.scss */
#player #repeatOnceButton {
  left: 88px;
  background-image: url("../images/repeatonce.svg");
}
/* line 162, scss/main.scss */
#player #repeatAllButton {
  left: 88px;
  background-image: url("../images/repeat.svg");
}
/* line 163, scss/main.scss */
#player #shuffleButtonOn {
  right: 114px;
  background-image: url("../images/shuffle.svg");
}
/* line 164, scss/main.scss */
#player #shuffleButtonOff {
  right: 114px;
  background-image: url("../images/shuffle.svg");
  opacity: .4;
}
/* line 165, scss/main.scss */
#player #jp-title, #player #title {
  left: 115px;
}
/* line 166, scss/main.scss */
#player #tooltip {
  right: 225px;
  width: 120px;
}
/* line 167, scss/main.scss */
#player #timer {
  right: 142px;
}
/* line 168, scss/main.scss */
#player #baseLeft {
  width: 188px;
}
/* line 169, scss/main.scss */
#player #baseRight {
  width: 145px;
  z-index: -1;
}
/* line 170, scss/main.scss */
#player #seeker {
  right: 350px;
}
/* line 171, scss/main.scss */
#player #volume {
  width: 70px;
  right: 33px;
}

/* line 174, scss/main.scss */
#playlistW {
  border-left-width: 1px;
  border-left-style: solid;
  border-image: linear-gradient(to bottom, rgba(3, 6, 68, 0), #030644, rgba(3, 6, 68, 0)) 1 100%;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}

/* line 183, scss/main.scss */
#playlist {
  background: linear-gradient(to bottom, #ffdfff, #d5edfb, #d4fff6);
  z-index: -2;
}
/* line 186, scss/main.scss */
#playlist:before {
  background-image: linear-gradient(to bottom, #ff6487, #b54dd0, #006dff);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  animation: gradientfade 300s ease-in;
  animation-fill-mode: forwards;
  z-index: -1;
}
/* line 199, scss/main.scss */
#playlist #playlistContainer {
  top: 28px;
}
/* line 202, scss/main.scss */
#playlist h3, #playlist li {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #030644;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 28px;
  border-bottom: none;
}
/* line 211, scss/main.scss */
#playlist .item, #playlist h3 {
  padding: 0 5px;
}
/* line 214, scss/main.scss */
#playlist .module {
  background: transparent;
  border: none;
}
/* line 218, scss/main.scss */
#playlist .odd {
  background-color: rgba(3, 6, 68, 0.1);
}
/* line 221, scss/main.scss */
#playlist .focus {
  background-color: #030644;
  color: white;
}

/* line 227, scss/main.scss */
#playlist #playlistContainer div {
  background-color: transparent !important;
}

/* Setting/Others Buttons */
/* line 233, scss/main.scss */
#player #repeatButton a, #player #repeatOnceButton a,
#player #repeatAllButton a, #player #shuffleButtonOff a, #player #shuffleButtonOn a {
  background-repeat: no-repeat;
  display: block;
  width: 22px;
  height: 25px;
  outline: 0;
}

/* line 241, scss/main.scss */
footer {
  position: absolute;
  bottom: 20px;
  left: 50%;
}
/* line 245, scss/main.scss */
footer a {
  text-decoration: none;
}