/* To try it, just go to about:blank and add the style */

body {
	margin: 0; padding: 0;
	animation-name: bg;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-color: #E63A36;
	color: #333;
	font-family: sans-serif;
	height: 100vh;
	background: linear-gradient(to bottom, #E63A36 20%, #F8D453 40%, #F8D453 60%, #E63A36 80%);
	background-size: 100% 600%;
	background-position: 0 0;
	position: relative;
	overflow: hidden;
	&:before {
		content: "Hello World";
		color: #FFF;
		display: block;
		text-align: center;
		font-size: 5vw;
		padding: 5vw;
		text-shadow: 0 0 3vw rgba(230, 58, 54, 0.2);
	}
	&:after {
		content: "";
		background: #ffe799;
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin: 0 0 -15vw -15vw;
		animation-name: sun;
		animation-duration: 12s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		transform-origin: 50% 800%;
		box-shadow: 0 0 10vw #ffe799;
	}
}

@keyframes bg {
	0% {   background-position: 0 0; }
	50% {  background-position: 0 50%; }
	100% { background-position: 0 100%; }
}
@keyframes sun {
	0% {   transform: rotate(30deg);  }
	100% { transform: rotate(-30deg);  }
}