/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}

html {
	font-family: 'Montserrat', sans-serif;
}

body {
	color: #fff;
	background: #000;
	background-position: center;
	background-size: cover;
	height: 100vh;
	position: relative;
}

body::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/stardust.jpg") repeat-y;
	background-position: 0;
	background-size: cover;
	opacity: .3;
	animation: bgscr 500s infinite linear;
}

@keyframes bgscr {
	from{
		background-position: 0 0;
	}
	to{
		background-position: 0 2400px;
	}
}

.overray {
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15vh;
	max-height: 200px;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 1)15%, rgba(0, 0, 0, 0));
}

h1 {
	display: inline-block;
	margin: 0 auto;
	font-size: 5rem;
	opacity: 0.7;
	animation: ltspace 50s alternate infinite linear;
}

@keyframes ltspace {
	from{
		letter-spacing: 10px;
	}
	to{
		letter-spacing: 40px;
	}
}

.flicker {
	text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			0px 0px 0 cyan,
			-0px -0px 0 magenta;
	animation: flcr 10s alternate infinite linear;
}

@keyframes flcr {
	0%{
		opacity: 0.9
	}
	30%{
		opacity: 0.9;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			0px 0px 0 cyan,
			-0px -0px 0 magenta;
	}
	31%{
		opacity: 0.2;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			3px 3px 1px cyan,
			-3px -3px 1px magenta;
	}
	32%{
		opacity: 1;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			0px 0px 0 cyan,
			-0px -0px 0 magenta;
	}
	33%{
		opacity: 0.2
	}
	34%{
		opacity: 0.7
	}
	60%{
		opacity: 0.7
	}
	61%{
		opacity: 0;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			0px 0px 0px cyan,
			0px 0px 0px magenta;
	}
	62%{
		opacity: 0.5;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			3px 0px 1px cyan,
			-3px -3px 1px magenta;
	}
	63%{
		opacity: 0.1;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			-3px 0px 1px cyan,
			3px 3px 1px magenta;
	}
	64%{
		opacity: 1;
		text-shadow: 0 0 5px rgba(255, 254, 233, 0.5),
			0px 0px 0px cyan,
			0px 0px 0px magenta;
	}
	65%{
		opacity: 0.8
	}
	100%{
		opacity: 0.8
	}
}


h2 {
	text-align: center;
	font-size: 1.25rem;
	font-weight: lighter;
}

p {
	text-align: center;
	font-size: 14px;
	font-weight: lighter;
}

a {
	color: #fff;
}

.wrapper {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

h1 {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-indent: 0.5em;
}

.earth-wrap {
	width: 95vw;
	max-width: 600px;
	height: 95vw;
	max-height: 600px;
	border-radius: 800px;
	background: #1c1c1c;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 65%);
	overflow: hidden;
	box-shadow: 0 0 20px 5px rgba(183, 242, 255, 0.4),
			0 0 100px 5px rgba(255, 255, 255, 0.4),
			0 0 200px 30px rgba(255, 255, 255, 0.3),
			0 0 30px 3px #000 inset;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: 3rem;
}

.earth-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 800px;
	box-shadow: 0 0 15px 1px rgba(183, 242, 255, 1) inset;
}

.earth {
	position: absolute;
	inset: 0;
	background: url("../img/earth-map.jpeg") repeat-y;
	background-position: 0;
	background-size: cover;
	opacity: 1;
	border-radius: 800px;
	box-shadow: 0 0 30px 5px #fff inset;
	animation: scr 80s infinite linear;
}

@keyframes scr {
	from{
		background-position: 0 0;
	}
	to{
		background-position: 0 -1920px;
	}
}

.earth-wrap h2,
.earth-wrap p {
	position: relative;
	z-index: 10;
}

.earth-wrap h2 {
	margin-bottom: 1em;
}

.earth-wrap p {
	margin-bottom: 1rem;
}

@media (max-width: 490px) {
	.earth-wrap {
		transform: translate(-50%, 50%);
	}
}