style.css

div[class*="yellow-chip--"],
div[class*="main-black--"] {
  background: #ffcd00;
}

.container .chip--container {
  position: relative;
  height: 600px;
  transform: rotateZ(-30deg);
}

.yellow-chip--1 {
  top: 0;
  left: 0;
  width: 251px;
  height: 200px;
  border-radius: 100% 0 0 0;
}

.yellow-chip--2 {
  top: 0;
  right: 0;
  width: 251px;
  height: 200px;
  border-radius: 0 100% 0 0;
}

.yellow-chip--3 {
  top: 199px;
  left: 0;
  width: 251px;
  height: 400px;
  border-radius: 0 0 0 100%;
}

.yellow-chip--4 {
  top: 199px;
  right: 0;
  width: 251px;
  height: 400px;
  border-radius: 0 0 100% 0;
}

.container .main-black--container {
  top: 150px;
  left: 100px;
  z-index: 2000;
  overflow: hidden;
  width: 180px;
  height: 180px;
  border-radius: 0 35% 0 0;
  background-color: #000;
}

.main-black--left {
  top: -50%;
  left: -191%;
  width: 200%;
  height: 200%;
  border-radius: 0 25% 0 0;
  transform: rotateZ(45deg);
}

.main-black--bottom {
  bottom: -150%;
  left: -13%;
  width: 150%;
  height: 150%;
  border-radius: 0 20% 0 0;
  transform: rotateZ(-35deg);
}

.black-thumb {
  top: 310px;
  left: 100px;
  z-index: 1000;
  width: 70px;
  height: 30px;
  border-radius: 0 0 50% 50%;
  background-color: #000;
}

.black-index {
  top: 280px;
  right: 46px;
  z-index: 1001;
  width: 300px;
  height: 60px;
  border-radius: 23% 0 60% 0;
  background-color: #000;
  transform: rotateZ(65deg);
  transform-origin: top left;
}

.black-index::after {
  position: absolute;
  top: 0;
  right: -7px;
  z-index: 3002;
  width: 30px;
  height: 35px;
  border-radius: 0 25% 75% 0;
  background-color: #000;
  content: '';
}

.black-middle {
  top: 326px;
  left: 185px;
  z-index: 3000;
  width: 60px;
  height: 114px;
  border-radius: 0 0 15% 85%;
  background-color: #000;
  transform: rotateZ(25deg);
}

.black-middle::before {
  position: absolute;
  top: -20px;
  left: 0;
  z-index: 3001;
  width: 100%;
  height: 30px;
  border-radius: 40% 60% 0 0;
  background-color: #000;
  content: '';
}


.highlighting-prompt {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-size: 64px;
  color: white;
  font-family: sans-serif;
  border-bottom: 3px dotted white;
}

.highlighting-prompt:hover {
  color: cyan;
  border-bottom-color: cyan;
}


/*** Highlighted Areas ***/

.highlight div[class*="yellow-chip--"]:hover,
.highlight .main-black--container:hover,
.highlight .black-middle:hover,
.highlight .black-thumb:hover,
.highlight .black-index:hover {
  background: rgba(93, 221, 240, 0.5);
}

.highlight .black-index:hover::after,
.highlight .black-middle:hover::before {
  background-color: rgba(255, 54, 54, 0.8);
}

.highlight .main-black--left,
.highlight .main-black--bottom {
  background-color: rgba(64, 255, 64, 0.5);
  pointer-events: none;
}

.highlight .main-black--container {
  overflow: visible;
}

/***/


body {
  background: #000;
}

body::after {
  position: absolute;
  top: 100px;
  left: 0;
  width: 500px;
  height: 200px;
  /*background-image: url(https://yellowpages.learn.taleo.net/files/images/Yellow_Pages_logo.png);*/
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

.container {
  position: relative;
  margin: 100px auto 0;
  width: 500px;
}

.container::after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0;
}

.container * {
  position: absolute;
  transform-origin: center center;
}