body {
  background-image: url(img/gola.svg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
}
svg {
  width: 70%;
}

.rotate {
   transition: transform 0.6s;
}

.rotate:hover {
  transform: rotateZ(360deg);
}

button:hover {
  background-color: white;
}

.btnx:hover {
  background-color: black;
}

#live {
  background: white;
  transition: transform 0.6s;
}

#live:hover {
  background: #2F2E41;
  color: white;
  transform: scale(1.1,1);
}

.live:hover {
  transform: scale(1.1,1);
}

#bigGear {
  animation: spin 5s ease-in-out infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

#smallGear {
  animation: spin 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}



#board {
  animation: anim 3s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
}

#tab {
  animation: anim1 4s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
}

#ssb {
  animation: anim2 3s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
}

/* #left {
  animation: anim 1s ease infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
}
#right {
  animation: anim 1s ease infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
} */

/*#up-code {
  animation: anim1 10s ease-out 1s infinite reverse ;
  transform-origin: center;
  transform-box: fill-box;
}
#upc1 {
  animation: anim1 10s ease-out 2s infinite reverse ;
  transform-origin: center;
  transform-box: fill-box;
}
#upc2 {
  animation: anim1 10s ease-out 3s infinite reverse ;
  transform-origin: center;
  transform-box: fill-box;
}
#down-code {
  animation: anim2 10s ease-out 4s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
*/
/*#dc1 {
  animation: anim2 10s ease-out 5s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
#dc2 {
  animation: anim2 10s ease-out 6s infinite;
  transform-origin: center;
  transform-box: fill-box;
}*/

/* #tree {
  animation: anim1 1s ease-in-out infinite alternate-reverse;
  transform-origin: center;
  transform-box: fill-box;
} */


@keyframes spin {
  form {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}

@keyframes anim {
  form {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(30deg);
  }
}

@keyframes anim1 {
  form {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(15deg);
  }
}

@keyframes anim2 {
  form {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(20deg);
  }
}


/* @keyframes anim1 {
  form {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(20deg);
  }
} */