/* CSS Document */

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

body {
 	margin: 0;
  	padding: 0;
    background-image: linear-gradient(to bottom right, #040308, #011E82, #9D95B6, #D75DBC, #4F60B5, #4F60B5, #040308);
    overflow: hidden;
}

.gradient {
	position: absolute;
	background-image: linear-gradient(to bottom left, #040308, #011E82, #9D95B6, #D75DBC, #4F60B5, #4F60B5, #040308);
	height: 100vh;
 	width: 100vw;
 	max-width: 100%;
  	overflow: hidden;
 	margin: 0;
	padding: 0;
	-webkit-animation: fade 20s alternate linear infinite;
	animation: fade 20s alternate linear infinite;
	z-index: 1;
}

#container {
	background-image: url("stars-transparent.gif");
	position: absolute;
  	height: 100vh;
 	width: 100vw;
 	max-width: 100%;
  	overflow: hidden;
 	margin: 0;
	padding: 0;
	z-index: 2;
}

img {
  width: 150px;
  height: auto;
}

.balloon {
 	position: absolute;
	left: 5vw;
	top: 20vh;
 	width: 150px;
 	height: auto;
	-webkit-animation: star 60s alternate ease-in-out infinite;
 	animation: star 60s alternate ease-in-out infinite;
}

@-webkit-keyframes star {
	0% { left: 5vw; top: 20vh;}
	25% { left: 25vw; top: 45vh; }
	50% { left: 40vw; top: 25vh; }
	75% {left: 65vw; top: 55vh; }
	100% {left: 85vw; top: 25vh;}
}

@keyframes star {
	0% { left: 5vw; top: 20vh;}
	25% { left: 25vw; top: 45vh; }
	50% { left: 40vw; top: 25vh; }
	75% {left: 65vw; top: 55vh; }
	100% {left: 85vw; top: 25vh;}
}

@-webkit-keyframes fade {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes fade {
	0% { opacity: 1; }
	100% { opacity: 0; }
}