/* CSS Document */
/* julianne aguilar
ghost in the sky
juliannes.website
2021 */

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

body {
	margin: 0;
	padding: 0;
	max-width: 100%;
	font-family: 'Heebo', sans-serif;
	font-size: 8vw;
	text-shadow: -20px -20px rgba(0,0,0,0.1);
	color: yellow;
	overflow: hidden;
	background-image: url("bitmap-sky.png");
	background-size: 100% 100%;
}

#gradient {
	position: absolute;
	z-index: 1;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	max-width: 100%;
	background-image: linear-gradient(to bottom right, #8fb8e0, #9694c8, #516dd8, #b0d0e3, #3040ba, #d2e3e3, #192cb9);
	-webkit-animation: ani 55s linear alternate infinite;
	animation: ani 55s linear alternate infinite;
}

#container {
	position: absolute;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow: hidden;
	z-index: 2;
}

.perspective {
	position: absolute;
	left: 15vw;
	bottom: 15vw;
	-moz-perspective: 500px;
	perspective: 500px;
	-moz-perspective-origin: left;
  	perspective-origin: left;
	-moz-transform: rotate(-15deg);
	transform: rotate(-15deg);
} 

.text {
	-moz-transform: rotateY(40deg);
  	transform: rotateY(40deg);
	-webkit-animation: fade 5s linear alternate infinite;
	animation: fade 5s linear alternate infinite;
}

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

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

@-webkit-keyframes ani {
	0% { opacity: 0.3; }
	15% { opacity: 0.6; }
	35% { opacity: 0.7; }
	50% { opacity: 0.2; }
	65% { opacity: 0.6; }
	85% { opacity: 0.2; }
	100% { opacity: 0.4; }
}

@keyframes ani {
	0% { opacity: 0.3; }
	15% { opacity: 0.6; }
	35% { opacity: 0.7; }
	50% { opacity: 0.2; }
	65% { opacity: 0.6; }
	85% { opacity: 0.2; }
	100% { opacity: 0.4; }
}