
#block1 {
	height: 			50vh;
	background-color: 	red;
	color:				white;
	padding:			20px;
	text-align:			center;
}


#block2 {
	height: 			50vh;
	background-color: 	blue;
	color:				white;
	padding:			20px;
	text-align:			center;
	transition: 		transform 0.2s ease-in, margin-top 0.2s;
}
.zap {
	transform: 			scale(1, 0);
	margin-top:				25vh;
}

#block3 {
	height: 			50vh;
	background-color: 	yellow;
	color:				black;
	padding:			20px;
	text-align:			center;
	margin-top:			20px;
}

.rotating {
	animation:         	rotateanimation 4s infinite;
}

@keyframes rotateanimation {
  0%   { opacity: 1; transform: rotate(0deg); background-color: yellow;}
  25%   { opacity: 0.5; transform: rotate(-90deg); background-color: grey;}
  50%   { opacity: 1; transform: rotate(0deg); background-color: brown;}
  75%   { opacity: 0.5; transform: rotate(90deg); background-color: grey; }
  100% { opacity: 1; transform: rotate(0deg); background-color: yellow;}
}

#block4 {
	height: 			50vh;
	background-color: 	green;
	color:				white;
	padding:			20px;
	text-align:			center;
}

.smaller {
	width:				10%;
}

#block5 {
	height: 			50vh;
	background-color: 	black;
	color:				white;
	padding:			20px;
	text-align:			center;
}
