/* CSS Document */

html, body {
	min-height: 100%;
}

body {
	background-color: aliceblue;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.text {
	width: 100vw;
	max-height: 100vh;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 5vw;
	color:#5170A3;
	font-style: italic;
}

.fire {
	position: absolute;
	height: 8vw;
	width: auto;
	left: 10%;
	bottom: 10%;
}

.one {
	position: absolute;
	height: 14vw;
	width: 14vw;
	background-color: #96c287;
	top: 10%;
	left: 10%;
	opacity: 0.7;
	animation: ani1 300s ease alternate infinite;
}

.two {
	position: absolute;
	height: 24vw;
	width: 24vw;
	background-color: #f7d37d;
	top: 27%;
	left: 32%;
	opacity: 0.7;
	animation: ani2 300s ease alternate infinite;
}

.three {
	position: absolute;
	height: 12vw;
	width: 12vw;
	background-color: #cbc6e4;
	top: 66%;
	left: 41%;
	opacity: 0.7;
	animation: ani3 300s ease alternate infinite;
}

.four {
	position: absolute;
	height: 18vw;
	width: 18vw;
	background-color: #daa4b4;
	top: 36%;
	left: 63%;
	opacity: 0.7;
	animation: ani4 300s ease alternate infinite;
}

.five {
	position: absolute;
	height: 13vw;
	width: 13vw;
	background-color: #66a1d9;
	top: 11%;
	left: 84%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.six {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #96c287;
	top: 50%;
	left: 37%;
	opacity: 0.7;
	animation: ani3 300s ease alternate infinite;
}

.seven {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #f7d37d;
	top: 74%;
	left: 68%;
	opacity: 0.7;
	animation: ani4 300s ease alternate infinite;
}

.eight {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #cbc6e4;
	top: 48%;
	left: 79%;
	opacity: 0.7;
	animation: ani1 300s ease alternate infinite;
}

.nine {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #daa4b4;
	top: 12%;
	left: 80%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.ten {
	position: absolute;
	height: 2vw;
	width: 2vw;
	background-color: #66a1d9;
	top: 8%;
	left: 90%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.eleven {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #96c287;
	top: 6%;
	left: 47%;
	opacity: 0.7;
	animation: ani3 300s ease alternate infinite;
}

.twelve {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #f7d37d;
	top: 27%;
	left: 69%;
	opacity: 0.7;
	animation: ani1 300s ease alternate infinite;
}

.thirteen {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #cbc6e4;
	top: 23%;
	left: 17%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.fourteen {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #daa4b4;
	top: 79%;
	left: 35%;
	opacity: 0.7;
	animation: ani4 300s ease alternate infinite;
}

.fifteen {
	position: absolute;
	height: 2vw;
	width: 2vw;
	background-color: #66a1d9;
	top: 58%;
	left: 84%;
	opacity: 0.7;
	animation: ani2 300s ease alternate infinite;
}

.sixteen {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #96c287;
	top: 37%;
	left: 28%;
	opacity: 0.7;
	animation: ani4 300s ease alternate infinite;
}

.seventeen {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #f7d37d;
	top: 15%;
	left: 68%;
	opacity: 0.7;
	animation: ani2 300s ease alternate infinite;
}

.eighteen {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #cbc6e4;
	top: 78%;
	left: 80%;
	opacity: 0.7;
	animation: ani1 300s ease alternate infinite;
}

.nineteen {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #daa4b4;
	top: 50%;
	left: 67%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.twenty {
	position: absolute;
	height: 2vw;
	width: 2vw;
	background-color: #66a1d9;
	top: 25%;
	left: 79%;
	opacity: 0.7;
	animation: ani3 300s ease alternate infinite;
}

.twentyone {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #96c287;
	top: 16%;
	left: 25%;
	opacity: 0.7;
	animation: ani5 300s ease alternate infinite;
}

.twentytwo {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #f7d37d;
	top: 57%;
	left: 37%;
	opacity: 0.7;
	animation: ani4 300s ease alternate infinite;
}

.twentythree {
	position: absolute;
	height: 4vw;
	width: 4vw;
	background-color: #cbc6e4;
	top: 39%;
	left: 49%;
	opacity: 0.7;
	animation: ani2 300s ease alternate infinite;
}

.twentyfour {
	position: absolute;
	height: 3vw;
	width: 3vw;
	background-color: #daa4b4;
	top: 80%;
	left: 89%;
	opacity: 0.7;
	animation: ani1 300s ease alternate infinite;
}

.twentyfive {
	position: absolute;
	height: 2vw;
	width: 2vw;
	background-color: #66a1d9;
	top: 18%;
	left: 59%;
	opacity: 0.7;
	animation: ani3 300s ease alternate infinite;
}

@keyframes ani1 {
	100% { transform: skew(320deg, 0deg); }
}

@keyframes ani2 {
	100% { transform: skew(20deg, 90deg); }
}

@keyframes ani3 {
	100% { transform: skew(-10deg, -200deg) rotate(360deg); }
}

@keyframes ani4 {
	100% { transform: skew(45deg, 360deg); }
}

@keyframes ani5 {
	100% { transform: skew(-22deg, -247deg) rotate(360deg); }
}