svg#color_wheel {
  width: 100%;
  max-width: 300px;
  height: auto;
  overflow: unset !important;
}
svg#color_wheel .black-white, svg#color_wheel g {
  cursor: pointer;
  transition: .3s ease-in-out;
  z-index: 1000;
  position: relative
}
svg#color_wheel .darkblue.selected, svg#color_wheel .darkblue:hover {
  transform: translateY(4.5%)
}
svg#color_wheel .steelblue.selected, svg#color_wheel .steelblue:hover {
  transform: translate(3%, 4.5%)
}
svg#color_wheel .dodgerblue.selected, svg#color_wheel .dodgerblue:hover {
  transform: translate(4.5%, 3%)
}
svg#color_wheel .cadetblue.selected, svg#color_wheel .cadetblue:hover {
  transform: translateX(4.5%)
}
svg#color_wheel .green.selected, svg#color_wheel .green:hover {
  transform: translate(4.5%, -3%)
}
svg#color_wheel .yellowgreen.selected, svg#color_wheel .yellowgreen:hover {
  transform: translate(3%, -4.5%)
}
svg#color_wheel .yellow.selected, svg#color_wheel .yellow:hover {
  transform: translateY(-4.5%)
}
svg#color_wheel .orange.selected, svg#color_wheel .orange:hover {
  transform: translate(-3%, -4.5%)
}
svg#color_wheel .orangered.selected, svg#color_wheel .orangered:hover {
  transform: translate(-4.5%, -3%)
}
svg#color_wheel .red.selected, svg#color_wheel .red:hover {
  transform: translateX(-4.5%)
}
svg#color_wheel .pink.selected, svg#color_wheel .pink:hover {
  transform: translate(-4.5%, 3%)
}
svg#color_wheel .purple.selected, svg#color_wheel .purple:hover {
  transform: translate(-3%, 4.5%)
}
svg#color_wheel .blackwhite.selected, svg#color_wheel .blackwhite:hover {
  transform: scale(1.2) translate(-8.5%, -7.9%)
}.artwork-image {
  width: auto;
  max-width: 95%;
  max-height: 72vh;
  margin: 0 auto;
}
.scene {
  position: relative;
  width: 350px;
  height: 350px;
  background-size: 350px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.scene img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  user-select: none;
  box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, .3)
}