/*! Create Reality – Landingpage */

html {
	min-height: 100%;
	background: #0a0c12;
	background: radial-gradient(ellipse 120% 90% at 50% 32%, #1a2340 0%, #0c0f1a 58%, #07080d 100%) fixed;
}

/* atmender Sternenraum – zwei phasenverschobene Ebenen */
html::before,
html::after {
	content: "";
	position: fixed;
	inset: -15%;
	background: url(../img/starfield.png) center top / 1400px auto repeat;
	pointer-events: none;
	z-index: -1;
	will-change: transform, opacity;
}

html::before {
	animation: cr-drift 165s ease-in-out infinite alternate,
	           cr-twinkle 9s ease-in-out infinite alternate;
}

html::after {
	background-position: 230px 150px;
	opacity: .6;
	animation: cr-drift2 225s ease-in-out infinite alternate,
	           cr-twinkle2 7s ease-in-out infinite alternate;
}

@keyframes cr-drift  { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(-3%, -2.5%, 0); } }
@keyframes cr-drift2 { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(2.5%, 2%, 0); } }
@keyframes cr-twinkle  { from { opacity: .9; }  to { opacity: .5; } }
@keyframes cr-twinkle2 { from { opacity: .5; }  to { opacity: .8; } }

@media (prefers-reduced-motion: reduce) {
	html::before, html::after { animation: none; }
}

body {
	min-height: 100%;
	margin: 0;
	background: transparent;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: #f4f4f6;
}

body#landing {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: #9db4ff;
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: #c5d3ff;
}

/**************************** hero ************************/

.hero {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 24px;
}

.hero__logo {
	width: 100%;
	max-width: 880px;
	height: auto;
	filter: drop-shadow(0 0 34px rgba(157, 180, 255, 0.22));
}

.hero__tagline {
	margin: 40px 0 0;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #d7dcec;
}

.hero__contact {
	margin: 18px 0 0;
	font-size: 16px;
}

/**************************** footer ************************/

footer {
	flex-shrink: 0;
	width: 100%;
	padding: 24px 20px 32px;
	text-align: center;
	font-size: 13px;
	color: #7e859b;
}

footer a {
	color: #b9c0d6;
}

footer a:hover {
	color: #ffffff;
}

.footer__sep {
	margin: 0 8px;
	color: #4a5066;
}

/**************************** responsive ************************/

@media (max-width: 640px) {
	.hero {
		padding: 36px 18px;
	}
	.hero__tagline {
		font-size: 15px;
		letter-spacing: .16em;
	}
	.footer__sep {
		margin: 0 5px;
	}
}