body, html {
  height: 100%;
  margin: 0;
}
svg {
  max-height: 100%;
}
#conveyer_line01 { 
  transform-origin: 144.905px 132.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
}
#conveyer_line02 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.25s; 
} 
#conveyer_line03 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.5s; 
} 
#conveyer_line04 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -0.75s; 
} 
#conveyer_line05 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1s; 
} 
#conveyer_line06 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.25s; 
} 
#conveyer_line07 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.5s;
} 
#conveyer_line08 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -1.75s; 
} 
#conveyer_line09 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2s;
} 
#conveyer_line10 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.25s; 
} 
#conveyer_line11 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.5s; 
} 
#conveyer_line12 { 
  transform-origin: 162.905px 140.608px; 
  animation-name: conveyer-roll; 
  animation-duration: 3s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: -2.75s;
} 
#arm_back { 
  transform-origin: 208.053px 132.805px; 
} 
#donut, #donut2 { 
  transform-origin: 208.053px 147.491px; 
  animation-name: donut-roll;
  animation-duration: 4s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
} 
#donut2 { 
  animation-delay: -2s; 
} 
#arm_left { 
  transform-origin: 208.053px 109.099px; 
  animation-name: arm-left-rotate; 
  animation-duration: 2s;
  animation-timing-fucnction: linear;
  animation-iteration-count: infinite; 
} 
#arm_right { 
  transform-origin: 208.125px 109.099px; 
  animation-name: arm-right-rotate;
  animation-duration: 2s; 
  animation-timing-fucnction: linear; 
  animation-iteration-count: infinite;
} 
#back_string { 
  transform-origin: 208.053px 58.5px; 
} 
#center { 
  transform-origin: 208.053px 116.783px; 
} 
#donut_shadow, #donut_shadow2 { 
  transform-origin: 208.053px 158px; 
  opacity: 0;
  animation-name: shadow-fade; 
  animation-duration: 4s;
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
} 
#donut_shadow2 { 
  animation-delay: -2s; 
} 
#arm_back, #crane { 
  animation-name: crane-drop; 
  animation-duration: 2s;
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-delay: 0s;
} 
@keyframes conveyer-roll { 
  0% { transform: translate(0px, 0px); } 
  90% { transform: translate(498px, 287px); } 
  95% { transform: translate(520px, 311px); } 100% { transform: translate(513px, 330px); } 
} 
@keyframes crane-drop { 
  0% { transform: translate(0px, -200px); } 
  50% { transform: translate(0px, 0px); } 
  55% { transform: translate(0px, 0px); } 
  100% { transform: translate(0px, -200px); }
} 
@keyframes arm-left-rotate { 
  50% { transform: rotate(0deg); } 
  55% { transform: rotate(20deg) } 
  60% { transform: rotate(20deg) } 
  95% { transform: rotate(0deg); } 
} 
@keyframes arm-right-rotate { 
  50% { transform: rotate(0deg); } 55% { transform: rotate(-20deg) } 
  60% { transform: rotate(-20deg) } 95% { transform: rotate(0deg); } 
} 
@keyframes donut-roll {
  0% { transform: translate(0px, -200px); } 
  25% { transform: translate(0px, 0px); } 
  84% { transform: translate(435px, 248px) rotate(0deg); } 
  91% { transform: translate(480px, 330px) rotate(60deg); } 
  100% { transform: translate(495px, 480px) rotate(120deg); } 
} 
@keyframes shadow-fade { 
  0% { transform: translate(0px, 0px) scale(1.5); opacity: 0; } 
  25% { transform: translate(0px, 0px) scale(1); opacity: 0.75; } 
  84% { transform: translate(435px, 248px) rotate(0deg); opacity: 0.75; } 
  86% { opacity: 0; } 
  91% { transform: translate(480px, 330px) rotate(60deg); } 
  100% { transform: translate(495px, 480px) rotate(120deg); } 
}