#comic {
  position: relative;
  width: 398px;
  margin: 0 auto;
}

#ball-question {
  position: absolute;
  left: 50px;
  top: 95px;
  width: 300px;
  font-size: 18px;
}

#ball-ask {
  position: absolute;
  left: 172px;
  top: 129px;
  width: 54px;
  height: 36px;
  background: transparent;
  color: transparent;
  border: none;
}

#ball-ask:focus {
  outline: none;
  border: none;
}

#emoji-ball .ball {
  position: absolute;
  top: 200px;
  left: 38px;
  width: 320px;
  height: 320px;
  background: black;
  border-radius: 100%;
}

#emoji-ball .ball-cover {
  position: relative;
  width: 320px;
  height: 320px;
  background: url('ball.png') no-repeat;
  z-index: 100;
}

#emoji-ball .shading {
  position: absolute;
  left: 72px;
  top: 72px;
  width: 176px;
  height: 176px;
  border-radius: 100%;
  z-index: 50;
  background: black;
}

#ball-answer {
  position: absolute;
  left: 86px;
  top: 75px;
  width: 145px;
  height: 145px;
  background: url('triangle.png') no-repeat;
}

#ball-answer .text {
  position: absolute;
  left: 1px;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  font-size: 32px;
  line-height: 40px;
  padding-top: 76px;
  color: black;
  z-index: 10;
}

#ball-answer.three .text {
  padding-top: 33px;
}

#ball-answer {
  transition: all 1.0s cubic-bezier(0.6, 0.9, 0.5, 1.25);
}

#emoji-ball .shading {
  transition: all .5s ease-out;
  transition: opacity .5s ease-in;
}

#emoji-ball .ball {
  transition: all .075s ease-out;
}

#emoji-ball.dark .shading {
  transition: none;
  background: black !important;
  opacity: 1 !important;
}