@keyframes time-ago {
	from {
	}
	to {
		visibility: hidden;
	}
}
@keyframes logo {
	from {
		transform: translateZ(40vw);
	}
	to {
		transform: translateZ(-500vw);
		visibility: hidden;
	}
}

@keyframes crawl {
	from {
		transform: rotateX(50deg) translateY(150vh);
	}
	to {
		transform: rotateX(50deg) translateY(-1500vh);
	}
}

body {
	background-image: url("star-background.png");
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: black;
	overflow: hidden;
	font-family: 'Pathway Gothic One', sans-serif;
}

.time-ago-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	z-index: 3;
	animation: time-ago 8.4s linear both;
	background-color: black;
}

.time-ago {
	color: cadetblue;
	font-size: 6vw;
	animation: time-ago 7s linear both;
}

.logo-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	perspective: 30vw;
}

.logo {
	fill: black;
	stroke:#ffe81f;
	stroke-width:8;
	animation: logo 15s linear 8.4s both;
}

.text-wrapper {
	display: flex;
	justify-content: center;
	height: 100vh;
	perspective: 30vw;
	color: #ffc909;
	font-size: 5vw;
	font-weight: 600;
	letter-spacing: 0.7vw;
	line-height: 7vw;
	text-align: justify;
	transform: scaleY(0.8);
}

.crawl {
	display: grid;
	justify-items: center;
	position: relative;
	transform-origin: 50% 100%;
	animation: crawl 180s linear 10s both;
}

h2 {
	text-transform: uppercase;
}