html, body {
  height: 100%;
    
    
 background: linear-gradient(271deg, #bd84b9, #f8a594, #d7cc76);
    background-size: 600% 600%;

    -webkit-animation: bck 12s ease infinite;
    -moz-animation: bck 12s ease infinite;
    animation: bck 12s ease infinite;
    
  
}

  @-webkit-keyframes bck {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@-moz-keyframes bck {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@keyframes bck {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}

}
.ferris_wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) ;
}



/*.stand{
    
    margin: auto;
    width: 250;
    height: 250;
    padding:25px;
    background-color:#f8a594;
    border-radius: 50%;
}*/

@keyframes wheel_rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.buckets {
  position: absolute;
  border: 0px;
  width: 50px;
  height: 50px;
  border-radius: 0%;
  z-index: 1;
}

.buckets div {
  position: absolute;
  animation: bucket_rotate 40s infinite linear;
  top: 50%;
  left: 50%;
  margin-top: 32px;
  margin-left: 32px;
}

@keyframes bucket_rotate {
  0% { 
    transform: rotate(0) translateX(250px) rotate(0); 
  }
  100% { 
    transform: rotate(360deg) translateX(250px) rotate(-360deg); 
  }
}

.buckets div:nth-child(2) {
  animation-delay: -5s;
}

.buckets div:nth-child(3) {
  animation-delay: -10s;
}

.buckets div:nth-child(4) {
  animation-delay: -15s;
}

.buckets div:nth-child(5) {
  animation-delay: -20s;
}

.buckets div:nth-child(6) {
  animation-delay: -25s;
}

.buckets div:nth-child(7) {
  animation-delay: -30s;
}

.buckets div:nth-child(8) {
  animation-delay: -35s;
}
.buckets div:nth-child(9) {
  animation-delay: -40s;
}

.buckets div:nth-child(10) {
  animation-delay: -45s;
}