/* CSS Document */
/* feel go dream */
/* julianne aguilar */
/* juliannes.website */

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

body {
	background-image: url("_img/tree-wind.gif");
	background-repeat: no-repeat;
	background-size: cover;
	font-family: serif;
	font-size: 2vw;
}

img {
	width: 40vw;
	max-width: 100%;
}

#container {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.one {
	position: absolute;
	width: 40vw;
	height: 40vw;
	background-color: rgba(199,184,223,0.8);
	animation: ani1 120s ease alternate infinite;
}

.two {
	position: absolute;
	width: 40vw;
	height: 40vw;
	background-color: rgba(199,184,223,0.8);
	animation: ani2 120s ease alternate infinite;
}

.three {
	position: absolute;
	width: 40vw;
	height: 40vw;
	background-color: rgba(199,184,223,0.8);
	animation: ani3 120s ease alternate infinite;
}

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

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

@keyframes ani3 {
	100% { transform: translate(-120px, 50px) skew(0deg, -180deg); }
}

@media only screen and (max-width: 767px) {
	body {
		background-image: url("_img/tree-wind.gif");
		background-repeat: no-repeat;
		}
	
}