https://ugotsta.github.io/beatdown/?tracks=https://soundcloud.com/ugotsta/sleepy-days&css=cf19c6c52fe0522d8da90f1ca7f18471&gist=f4239e3ac44a75f9af05e6886e8425f6&peak=1&fontsize=335&bands=8

beatdown-sleepy-days.css

@import url('https://fonts.googleapis.com/css?family=Gruppo');

$primary-color: white;

* {
    font-family: 'Gruppo', serif;
    color: white;
}

#custom .inner::before {
    position: fixed;
    pointer-events: none;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E, #4BC0C8);
    background-position-x: 0vw;
}

#gd-beatdown .inner::before {
    animation: hues 30s linear infinite;
}

@keyframes hues {
    0% { background-position-x: 0vw; }
    100% { background-position-x: 100vw; }
}

#custom .inner {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    background: black;
    box-shadow: none;
    background-blend-mode: normal;
    overflow: hidden;
}

#custom .section {
    position: absolute;
    max-width: unset;
    min-width: unset;
    max-height: unset;
    min-height: unset;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    height: 40%;
    width: 75%;
    overflow: hidden;
    background: none;
    border: none;
    box-shadow: none;
    mix-blend-mode: exclusion;
}

#gd-beatdown .handle-heading {
    display: none;
}

span#gd-track-artwork_url {
    width: 170px;
}

span#gd-track-title a, span#gd-track-user a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: 100;
    font-size: 1.2em;
}

span#gd-track-title a {
    font-weight: 900;
    font-size: 1.5em;
}

#custom .eq {
    position: fixed;
    max-width: unset;
    min-width: unset;
    max-height: unset;
    min-height: unset;
    top: -40%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    width: 80vw;
    height: 50vh;
    background: none;
    mix-blend-mode: overlay;
    z-index: 1;
    transform-origin: center bottom;
    opacity: 0.5;
}

#gd-beatdown .eq {
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    0% { transform: scale(1.5) rotate(360deg); }
    50% { transform: scale(2) rotate(180deg); }
    100% { transform: scale(1.5) rotate(0deg); }
}

/* Animations */
.gd-slides #custom .section.old,
.gd-slides #custom .section.current {
    animation-duration: 3s;
}

@keyframes in {
    0% { opacity: 1; transform: scale(1); filter: contrast(0%) brightness(150%) blur(18px); }
    100% { opacity: 1; transform: scale(1); filter: contrast(100%) brightness(100%) blur(0px); }
}

@keyframes out {
    0% { opacity: 1; filter: contrast(100%) brightness(100%) blur(0px); }
    100% { opacity: 1; filter: contrast(0%) brightness(150%) blur(18px); }
}

@keyframes in-reverse {
    100% { opacity: 1; transform: scale(1); filter: contrast(0%) brightness(150%) blur(18px); }
    0% { opacity: 1; transform: scale(1); filter: contrast(100%) brightness(100%) blur(0px); }
}

@keyframes out-reverse {
    100% { opacity: 1; filter: contrast(100%) brightness(100%)  blur(0px); }
    0% { opacity: 1; filter: contrast(0%) brightness(150%) blur(18px); }
}

#custom .eq .band {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    margin-right: 6px;
}

#custom .eq .band::after {
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    position: absolute;
    pointer-events: none;
    content: "";
    top: 0;
    bottom: -100%;
    left: 0;
    right: 0;
}