.js-loading *,
.js-loading *:before,
.js-loading *:after
{
  animation-play-state: paused !important;
}


*
{
	margin: 0;
	padding: 0;
	border: 0;
}


body
{
	background-color:black;
}


li
{
	list-style-type: none;
}


#logo-text
{
}


h1
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 28px;
	font-weight: lighter;
	color: white;
	text-align: center;
	opacity: 0.7;
}


.background-repeat { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-repeat: repeat; pointer-events: none; }


@keyframes fadeIn { from { opacity: 0; } }
@keyframes scroll-star-flicker1 { from {background-position: 0px 0px;} to {background-position:10000px -5000px;} }
@keyframes scroll-star-flicker2 { from {background-position: 0px 0px;} to {background-position:7770px 10000px;} }


.pulse-stars1
{
	z-index: 1;
	background-image: radial-gradient(2px 2px at 30px 80px, #fff, rgba(0,0,0,0));
	background-size: 800px 800px;
}


.pulse-stars2
{
	z-index: 2;
	background-image: radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0));
	background-size: 200px 200px;
}


.pulse-stars3
{
	z-index: 3;
	background-image: radial-gradient(2px 2px at 10px 10px, #fff, rgba(0,0,0,0));
	background-size: 373px 147px;
}


.pulse-stars4
{
	z-index: 4;
	background-image: radial-gradient(2px 2px at 63px 101px, #fff, rgba(0,0,0,0));
	background-size: 330px 212px;
}


.pulse-stars5
{
	z-index: 5;
	background-image: radial-gradient(1px 1px at 98px 8px, #fff, rgba(0,0,0,0));
	background-size: 547px 242px;
}


#star-flicker1
{
	z-index: 6;
	background-image: radial-gradient(300px 300px at 300px 300px, rgba(0,0,0,1), rgba(0,0,0,0));
	background-size: 600px 600px;
	animation:scroll-star-flicker1 10s linear infinite;
}

#star-flicker2
{
	z-index: 7;
	background-image: radial-gradient(100px 100px at 200px 200px, rgba(0,0,0,1), rgba(0,0,0,0));
	background-size: 400px 400px;
	animation:scroll-star-flicker2 1s linear infinite;
}


#space-gradient
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 8;
	
    background: linear-gradient(rgba(6,17,34,0.2), rgba(6,32,36,0.3), rgba(17,51,52,0.6), rgba(119,17,17,0.9), rgba(170,170,0,1), rgba(255,255,0,1));
	/*background: linear-gradient(#061122, #062024, #113334, #771111, #AAAA00, #FFFF00);*/
    background-repeat: no-repeat;
    background-attachment: fixed;
	pointer-events: none;
}


#dummy
{
    animation: fadeIn 0.0122s ease infinite alternate;
}


#planets
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	z-index: 9;
}


#content
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}


#dither
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	background-image:
	radial-gradient(1px 1px at 11px 10px, #00f, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 2px 3px, #eee, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 4px 7px, #cc0, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 5px 16px, #ddd, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 9px 4px, #aaa, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 13px 8px, #888, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 16px 12px, #F00, rgba(0,0,0,0));
	background-repeat: repeat;
	background-size: 18px 18px;
	opacity:0.16;
	pointer-events: none;
}


#grid
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 12;
	
	background-color:#00FF66;
	background-image:
	linear-gradient(black 2px, transparent 2px),
	linear-gradient(90deg, black 2px, transparent 2px),
	linear-gradient(rgba(0,0,0,.4) 1px, transparent 1px),
	linear-gradient(90deg, rgba(0,0,0,.4) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
	opacity:0.018;
	pointer-events: none;
}


#vignette
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 300px rgba(0,0,0,0.98) inset;
  z-index: 13;
  pointer-events: none;
}


#planets > div
{
	width: 100%;
	flex: 1;
}


#planet
{
	width: 100%;
	height: 100%;
	min-height: 53%;
	
	background-image:radial-gradient(74% 74% at center bottom, rgba(0,0,255,1) 0%, rgba(0,127,127,1) 94%, rgba(255,255,255,0.9) 99.6%, rgba(255,255,255,0) 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}


#content-columns
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
}


#content-columns > li
{
	flex: 1;
}


#content-rows
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}


#content-rows > li
{
	flex: 1;
}


@keyframes fade-in
{ 
	0%
	{
		opacity: 0;
		transform: scale(.1);
	}

	75%
	{
		opacity: 0.8;
		transform: scale(1.1);
	}
  
	100%
	{
		transform: scale(1);
	}
}


#social-menu
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
}


#social-menu > li
{
	flex: 1;
}


#social-menu > li > a > img
{ 
	display: none;
	opacity: 0.7;
    transition: opacity .4s ease-in;
	animation: fade-in 0.8s linear;
	animation-fill-mode: both;
	width: 64px;
	height: 64px;
}


#social-menu > li > a > img:hover
{ 
    opacity: 0.4;
	transition: opacity .2s ease-out;
}