/* ############################################################ */
/* # gear ##################################################### */

/* https://codepen.io/sketchbookkeeper/pen/jrmYXm */

.gear {
  position: absolute;

  transform-origin: top right;
  /* rotate: 22.5deg; */
  transform: scale(0.25);
  right: 30px;
  top: 30px;

  width: 200px;
  height: 200px;
  margin: auto;
  background: darkred;
  border-radius: 50%;
  /* animation-name: spin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; */
}

.gear .center {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 10;
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50%;
}

.tooth {
  position: absolute;
  top: -25px;
  left: 75px;
  z-index: 1;
  width: 45px;
  height: 250px;
  background: darkred;
}

.tooth:nth-child(2) {
  transform: rotate(45deg);
}

.tooth:nth-child(3) {
  transform: rotate(90deg);
}

.tooth:nth-child(4) {
  transform: rotate(135deg);
}

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