/* CSS Document */
/* julianne aguilar
mesa RV
juliannes.website
2021 */

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

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#container {
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	z-index: 1;
	overflow: hidden;
}

.land {
	width: 100vw;
	height: 40vh;
	background-image: linear-gradient(-2deg, #D0CECA, #AEB1B3, #D0CECA, #627A9B, #D0CECA, #A5ABB3, #DBD8D0);
}

.sky {
	width: 100vw;
	height: 60vh;
	background-image: linear-gradient(#DCE6FF, #EFDEF8, #EFDEF8, #9CA5DD);
}

.object {
	position: absolute;
	left: 15vw;
	top: 15vh;
	width: 70vh;
	height: 70vh;
	background-image: linear-gradient(to right, rgba(111,255,0,1), rgba(73,255,0,0.3), rgba(73,255,0,0.7), rgba(0,255,56,0.1), rgba(0,255,107,0.6));
	z-index: 3;
	-webkit-animation: ani 120s linear alternate infinite;
	animation: ani 120s linear alternate infinite;
	background-repeat: no-repeat;
}

img {
	width: 45vh;
	height: auto;
}

.cloud {
	z-index: 2;
	position: absolute;
	right: 5vw;
	top: 2vw;
	-webkit-animation: wind 60s ease-in-out alternate infinite;
	animation: wind 60s ease-in-out alternate infinite;
}

@-webkit-keyframes ani {
	100% { -webkit-transform: skew(180deg, 20deg) translate(55vw, 10vw); }
}

@keyframes ani {
	100% { transform: skew(180deg, 20deg) translate(55vw, 10vw); }
}

@-webkit-keyframes wind {
	100% { -webkit-transform: scale(0,0); }
}

@keyframes wind {
	100% { transform: scale(0,0); }
}