.main.red
    .circle
    .shelf
        span.name normal
        .buttons
            a.btn(data-color='white')
            a.btn.active(data-color='red')
            a.btn(data-color='blue')
            a.btn(data-color='yellow')
            a.btn(data-color='rainbow')

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

$color_background: #000;
$color_white: #fff;
$color_red: #f44336;
$color_blue: #1e88e5;
$color_yellow: #fdd835;
$color_rainbow: linear-gradient(
    to right,
    $color_red 25%,
    $color_blue 50%,
    $color_yellow 75%
);

$blend_modes: (
    normal,
    multiply,
    screen,
    overlay,
    darken,
    lighten,
    color-dodge,
    color-burn,
    hard-light,
    soft-light,
    difference,
    exclusion,
    hue,
    saturation,
    color,
    luminosity
);

//

.circle {
    display: block;
    position: relative;
    height: 140px;
    width: 140px;
    border-radius: 50%;

    &:before {
        content: "";
        display: block;
        position: absolute;
        top: -40px;
        right: -40px;
        bottom: -40px;
        left: -40px;
        border-radius: 50%;
        z-index: 1;
        //Different than $color_rainbow as it ends on red as well
        background: linear-gradient(
            to bottom,
            $color_red 0%,
            $color_blue 33%,
            $color_yellow 66%,
            $color_red 100%
        );
        -webkit-animation: animateRotation 5s infinite linear;
        -moz-animation: animateRotation 5s infinite linear;
        -o-animation: animateRotation 5s infinite linear;
        animation: animateRotation 5s infinite linear;
    }

    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 2;
    }

    @for $i from 1 to length($blend_modes) + 1 {
        $mode: nth($blend_modes, $i);
        &.#{$mode}:after {
            mix-blend-mode: $mode;
        }
    }
}

.shelf {
    display: block;
    position: relative;
    margin-left: 125px;
    width: 175px;
}

.btn {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: middle;

    &.active {
        height: 30px;
        width: 30px;
    }

    &:nth-of-type(1) {
        background-color: $color_white;
    }
    &:nth-of-type(2) {
        background-color: $color_red;
    }
    &:nth-of-type(3) {
        background-color: $color_blue;
    }
    &:nth-of-type(4) {
        background-color: $color_yellow;
    }
    &:nth-of-type(5) {
        background: $color_rainbow;
    }
}

.name {
    display: block;
    position: relative;
    height: 50px;
    margin-bottom: 5px;
    line-height: 50px;
    font-size: 30px;
    color: $color_red; //Default
}

//Quick n dirty theming

.main {
    &.white {
        .circle:after {
            background-color: $color_white;
        }
        .name {
            color: $color_white;
        }
    }
    &.red {
        .circle:after {
            background-color: $color_red;
        }
        .name {
            color: $color_red;
        }
    }
    &.blue {
        .circle:after {
            background-color: $color_blue;
        }
        .name {
            color: $color_blue;
        }
    }
    &.yellow {
        .circle:after {
            background-color: $color_yellow;
        }
        .name {
            color: $color_yellow;
        }
    }
    &.rainbow {
        .circle:after {
            background: $color_rainbow;
        }
        .name {
            background: $color_rainbow;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

//Keyframes

@keyframes animateRotation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        border-radius: 48%;
    }
    50% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        border-radius: 35%;
    }
    100% {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        transform: rotate(359deg);
        border-radius: 48%;
    }
}
//
// Default page styles
//

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-sizing: border-box;
    font-family: "Lobster", cursive;
}

html,
body {
    display: block;
    height: 100vh;
    width: 100vw;
    background-color: $color_background;
    background: linear-gradient(#1f1f21, $color_background);
}

.main {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

let main = document.querySelector(".main");
let name = document.querySelector(".name");
let circle = document.querySelector(".circle");

let time = 18000;
let blendModes = [
    "normal",
    "multiply",
    "screen",
    "overlay",
    "darken",
    "lighten",
    "color-dodge",
    "color-burn",
    "hard-light",
    "soft-light",
    "difference",
    "exclusion",
    "hue",
    "saturation",
    "color",
    "luminosity"
];
let increment = time / blendModes.length;
console.log("increment", increment, blendModes.length);
let index = 0;

document.addEventListener("click", e => {
    if (e.target.matches(".btn")) {
        document.querySelector(".btn.active").classList.remove("active");
        e.target.classList.add("active");

        let color = e.target.getAttribute("data-color");
        main.className = `main ${color}`;
    }
});

setInterval(() => {
    let mode = blendModes[index];
    name.innerHTML = mode;
    circle.className = `circle ${mode}`;

    index = index == blendModes.length - 1 ? 0 : index + 1;
}, increment);