.scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scene {
  background: black;
  overflow: hidden;
}

.reset {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font: 16px/1 Helvetica, sans-serif;
  padding: 7px 10px;
  background: rgba(51, 51, 51, 0.5);
  border-radius: 5px;
  transition: 300ms;
  cursor: pointer;
}
.reset:hover {
  background: #333333;
}

.lightbulbs, .tesla {
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
}
.lightbulbs:nth-of-type(1), .tesla:nth-of-type(1) {
  transform: translate(-50%, -100px);
}
.lightbulbs:nth-of-type(1) .lightbulb, .tesla:nth-of-type(1) .lightbulb {
  transform-origin: 0 100px;
}
.lightbulbs:nth-of-type(2), .tesla:nth-of-type(2) {
  transform: translate(-50%, -200px);
}
.lightbulbs:nth-of-type(2) .lightbulb, .tesla:nth-of-type(2) .lightbulb {
  transform-origin: 0 200px;
}
.lightbulbs:nth-of-type(3), .tesla:nth-of-type(3) {
  transform: translate(-50%, -300px);
}
.lightbulbs:nth-of-type(3) .lightbulb, .tesla:nth-of-type(3) .lightbulb {
  transform-origin: 0 300px;
}
.lightbulbs:nth-of-type(4), .tesla:nth-of-type(4) {
  transform: translate(-50%, -400px);
}
.lightbulbs:nth-of-type(4) .lightbulb, .tesla:nth-of-type(4) .lightbulb {
  transform-origin: 0 400px;
}
.lightbulbs:nth-of-type(5), .tesla:nth-of-type(5) {
  transform: translate(-50%, -500px);
}
.lightbulbs:nth-of-type(5) .lightbulb, .tesla:nth-of-type(5) .lightbulb {
  transform-origin: 0 500px;
}
.lightbulbs:nth-of-type(6), .tesla:nth-of-type(6) {
  transform: translate(-50%, -600px);
}
.lightbulbs:nth-of-type(6) .lightbulb, .tesla:nth-of-type(6) .lightbulb {
  transform-origin: 0 600px;
}
.lightbulbs:nth-of-type(7), .tesla:nth-of-type(7) {
  transform: translate(-50%, -700px);
}
.lightbulbs:nth-of-type(7) .lightbulb, .tesla:nth-of-type(7) .lightbulb {
  transform-origin: 0 700px;
}
.lightbulbs:nth-of-type(8), .tesla:nth-of-type(8) {
  transform: translate(-50%, -800px);
}
.lightbulbs:nth-of-type(8) .lightbulb, .tesla:nth-of-type(8) .lightbulb {
  transform-origin: 0 800px;
}
.lightbulbs:nth-of-type(9), .tesla:nth-of-type(9) {
  transform: translate(-50%, -900px);
}
.lightbulbs:nth-of-type(9) .lightbulb, .tesla:nth-of-type(9) .lightbulb {
  transform-origin: 0 900px;
}
.lightbulbs:nth-of-type(10), .tesla:nth-of-type(10) {
  transform: translate(-50%, -1000px);
}
.lightbulbs:nth-of-type(10) .lightbulb, .tesla:nth-of-type(10) .lightbulb {
  transform-origin: 0 1000px;
}
.lightbulbs .lightbulb:nth-of-type(2), .tesla .lightbulb:nth-of-type(2) {
  transform: rotate(45deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(3), .tesla .lightbulb:nth-of-type(3) {
  transform: rotate(90deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(4), .tesla .lightbulb:nth-of-type(4) {
  transform: rotate(135deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(5), .tesla .lightbulb:nth-of-type(5) {
  transform: rotate(180deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(6), .tesla .lightbulb:nth-of-type(6) {
  transform: rotate(225deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(7), .tesla .lightbulb:nth-of-type(7) {
  transform: rotate(270deg) translate(-50%, -50%);
}
.lightbulbs .lightbulb:nth-of-type(8), .tesla .lightbulb:nth-of-type(8) {
  transform: rotate(315deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(1), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(1) {
  transform: rotate(22.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(2), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(2) {
  transform: rotate(67.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(3), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(3) {
  transform: rotate(112.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(4), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(4) {
  transform: rotate(157.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(5), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(5) {
  transform: rotate(202.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(6), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(6) {
  transform: rotate(247.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(7), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(7) {
  transform: rotate(292.5deg) translate(-50%, -50%);
}
.lightbulbs:nth-of-type(2n + 2) .lightbulb:nth-of-type(8), .tesla:nth-of-type(2n + 2) .lightbulb:nth-of-type(8) {
  transform: rotate(337.5deg) translate(-50%, -50%);
}

.lightbulb {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid white;
  transform: translate(-50%, -50%);
}
.lightbulb.lit, .lightbulb:hover {
  background: #fffdec;
  box-shadow: 0px 0px 16px 2px rgba(255, 253, 236, 0.5);
}
.lightbulb::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  border-left: 1px solid white;
  opacity: 0.75;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
}
.lightbulb::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  border-radius: 100%;
  border-left: 2px solid red;
  opacity: 0.75;
  width: 50px;
  height: 50px;
  animation: spin 1s infinite linear;
}

.tesla {
  transform: translate(0px, -20px);
  transition: 1000ms;
}
.tesla .lightbulb {
  transform-origin: 0 20px;
  transition: 1000ms;
  border: none;
}
.tesla .lightbulb:hover, .tesla .lightbulb.lit {
  background: none;
  box-shadow: none;
}
.tesla .lightbulb::after {
  content: none;
}
.tesla .lightbulb::before {
  border-color: #00ff00;
  animation: reverse-spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes reverse-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}