.background {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(to top left, #0f2027, #203a43, #2c5364);
}

.holder {
  height: 200px;
  width: 400px;
}

.conveyor {
  position: relative;
  top: 100px;
  height: 50px;
  width: 350px;
  border: 5px solid grey;
  border-radius: 50px;
  transform: rotate(-15deg);
}

.box {
  position: relative;
  top: 0px;
  left: 170px;
  height: 50px;
  width: 50px;
  background-color: #d39518;
  border-radius: 5%;
  transform: rotate(-105deg);
  animation: box 2.75s linear infinite backwards;
}

.tape {
  position: relative;
  left: 20px;
  height: 18px;
  width: 10px;
  background-color: #966009;
}

p {
  font-size: 0.8rem;
  color: #966009;
  opacity: 0.9;
}

.gear1 {
  position: relative;
  height: 35px;
  width: 35px;
  left: 5px;
  top: -6px;
  filter: invert(20%);
  animation: gear 4.5s linear infinite backwards;
}

.gear2 {
  position: relative;
  height: 35px;
  width: 35px;
  left: 157px;
  top: -6px;
  filter: invert(20%);
  animation: gear 4.5s linear infinite backwards;
}

.roller-inner {
  position: relative;
  height: 16px;
  width: 16px;
  left: 7px;
  top: 7px;
  background-color: #f4f4f5;
  border-radius: 100%;
}

.roller1 {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #e2e6e8;
  left: 40px;
  top: 5px;
  border-radius: 100%;
}

.roller2 {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #e2e6e8;
  left: 85px;
  top: 5px;
  border-radius: 100%;
}

.roller3 {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #e2e6e8;
  left: 130px;
  top: 5px;
  border-radius: 100%;
}

@keyframes box {
  0% {
    transform: rotate(-15deg);
    top: -2px;
  }

  16.25% {
    transform: rotate(-55deg);
    top: -13px;
  }

  25% {
    transform: rotate(-105deg);
    top: -2px;
  }

  41.25% {
    transform: rotate(-145deg);
    top: -13px;
  }

  50% {
    transform: rotate(-195deg);
    top: -2px;
  }

  66.25% {
    transform: rotate(-235deg);
    top: -13px;
  }

  75% {
    transform: rotate(-285deg);
    top: -2px;
  }

  91.25% {
    transform: rotate(-325deg);
    top: -13px;
  }

  100% {
    transform: rotate(-375deg);
    top: -2px;
  }
}

@keyframes gear {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}