.img 
{
	width: 100vw;
	top: 0;
	left: 0;
	position: absolute;
}
.wheel
{
	z-index: 3;
	position: absolute;
	align-content: center;
	top:0;
	left:0;
	width: 100%;
}

.spinner
{
	position: relative;
	width: 25vw;
	left: 30vw;
	top: 30vh;
	animation: rotate 10s linear infinite;
}

.char
{
	z-index: 2;
}

.clouds
{
	z-index: 1;
	animation: drift 10s linear infinite;
}

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

@keyframes drift{
	0% {
		transform: translateX(0%) translateY(0%);
		opacity: 1; 
	}
	25% {
		transform: translateX(-10%) translateY(5%);
		opacity: 0.7; 
	}
	50% {
		transform: translateX(-3%) translateY(0%);
		opacity: 0.5; 
	}
	75% {
		transform: translateX(2%) translateY(5%);
		0.7;
	}
	100% {
		transform: translateX(0%) translateY(0%);
		opacity: 1; 
	}
}