body {
  background-color: black;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/p5-bg.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.container {
  position: relative;
}

.joker {
  background: none;
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.selector {
  height: 8%;
  left: 50%;
  position: absolute;
  top: 26.5%;
  transform: translate(-50%, -50%);
  transition: transform 50ms;
  width: 20%;
  z-index: 10;
}

.red {
  fill: #ff0022;
}

.blue {
  fill: #1cfeff;
  mix-blend-mode: screen; /* 🎩🐰 Where all the magic happens! Only needed on the top layer (blue) */
}

.menu {
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}