body {
  padding: 0;
  margin: 0;
}

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

* {
  font-family: 'Lato', Helvetica, sans-serif;
  color: #333447;
  line-height: 1.5;
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

.playlist_wrap {
  height: 100vh;
  width:  100vw;
  background-color: #000;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.wrapper {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 1s ease infinite;
-z-animation: rainbow 8s cubic-bezier(0.24, 0.21, 0.78, 0.81) infinite;
-o-animation: rainbow 8s cubic-bezier(0.24, 0.21, 0.78, 0.81) infinite;
  animation: rainbow 8s cubic-bezier(0.24, 0.21, 0.78, 0.81) infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

#playlist {
  z-index: 999;
  position: absolute;
}

#playlist iframe {
  border: 7px solid #fff;
  /*width: 65vw;
  height: 85vw;*/
}

article {
  z-index: 9999;
}

footer {
  padding: 20px 0 20px 0;
  text-align: center;
  background-color: #000;
  color: #fff;
}