body {
            background-repeat: repeat-y;
            /* fallback for non-supporting browsers */
            background-color: #00d2ff;
            /* standard */
            background-image: linear-gradient(to left, #00d2ff, #3a7bd5);
            /* for webkit browser - Chrome,Safari */
            background-image: -webkit-linear-gradient(to left, #00d2ff, #3a7bd5);
            /* for mozilla browser */
            background-image: -moz-linear-gradient(to left, #00d2ff, #3a7bd5);
            /* for opera browser */
            background-image: -o-linear-gradient(to left, #00d2ff,#3a7bd5);
          }

          #gear-1 {
            
            margin-left: 250px;
            margin-top: 200px;                   transfrom-origin: 125px 125px;
          }

          #gear-2 {
            /*float: left;*/
            margin-left:485px;
            margin-top: -350px;
            transform-origin: 100px 100px;
          }

          #gear-3 {
            margin-left: 500px;
            transform-origin: 75px 75px;
          }

          #gear-4 {
            margin-left:155px;
            margin-top: -250px;
            transform-origin: 50px 50px;
          }

          #gear-5 {
            margin-left: 100px;
            margin-top: 10px;
            transfrom-origin: 75px 75px;
          }

          #gear-6 {
            margin-left: 200px;
            margin-top: -25px;
            transform-origin: 100px 100px;
          }

          #gear-7 {
            margin-left: 660px;
            margin-top: -450px;
            transform-origin: 125px 125px;
          }

          #gear-8 {
            margin-left: 580px;
            margin-top: -20px;
            transform-origin: 100px 100px;
          }

          #gear-9 {
            margin-left: 420px;
            margin-top: -190px;
            transfrom-origin: 75px 75px;
          }

          #gear-10 {
            margin-left: 390px;
            margin-top: -510px;
          }

          svg {
            animation: animate 5s linear forwards infinite;
            -webkit-animation: animate 5s linear forwards infinite;
            -moz-animation: animate 5s linear forwards infinite;
            -o-animation: animate 5s linear forwards infinite;
            animation-play-state: running;
          }

          @-webkit-keyframes animate {
            to {
                transform: rotate(360deg);
              }
          }

          @-moz-keyframes animate {
            to {
                transform: rotate(360deg);
              }
          }