*{ margin: 0; padding: 0;}

body {
	overflow: hidden;
	display: flex;
	/*background: -webkit-linear-gradient(top, #89c0ea 0%, rgb(212, 228, 241) 100%);*/
	background: url(bliss.webp);
	background-size: cover no-repeat;
}

#clouds{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.x1, .x2, .x3, .x4 {
	background: url(cloud.png);
    background-size: contain;
    width: 17vw;
    height: 10vw;
}

.x1:hover{
	background: url(bird.png);
    background-size: contain;
    width: 17vw;
    height: 10vw;
	cursor: pointer;
}
.x2:hover{
	background: url(bunny.png);
    background-size: contain;
    width: 17vw;
    height: 10vw;
	cursor: pointer;
}
.x3:hover{
	background: url(turtle.png);
    background-size: contain;
    width: 17vw;
    height: 10vw;
	cursor: pointer;
}
.x4:hover{
	background: url(mouse.png);
    background-size: contain;
    width: 17vw;
    height: 10vw;
	cursor: pointer;
}

.x1 {
	animation: moveclouds 30s linear infinite;
	
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	opacity: 0.8; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	animation: moveclouds 25s linear infinite;
}

.x3 {
	animation: moveclouds 20s linear infinite;
}

.x4 {
	opacity: 0.75; /*opacity proportional to the size*/
	
	animation: moveclouds 30s linear infinite;
}


@keyframes moveclouds {
	0% {margin-left: 100vw;}
	100% {margin-left: -100vw;}
}