html {
	scrollbar-color: #32569b transparent;
}

body {
	margin: 0;
	height: 10000px;
	width: 10000px;
	font-family: sans-serif;
	
	text-align: center;

	background-color: black;
	background-image: url("/simple/misc/screensaver/vertpush-bg/starTest.gif"), url("/assets/bg-grid-white-2xa.png");
	
	letter-spacing: 1.5px;
	/*filter: grayscale(1);*/
	
	color: #8ca7e6;
}

a { text-decoration: none; color: #f83; }
a:hover { text-decoration: underline; color: #fc3; }

#bg {
	width: 100vw;
	height: 100vh;
}

#bg-image {
	width: 100vw;
	height: 100vh;
	background-origin: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/assets/index-bg.png");
	filter: drop-shadow(0 0 5px #2A4C59);
	position: absolute;
}

#splash-center {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

#title {
	position:relative;
	transition: .15s ease-out;
	bottom: 0px;
	filter: hue-rotate(-20deg);
}

#title:hover, #title:focus {
	bottom: 4px;
	animation: .4s linear 0 1;
	filter: hue-rotate(-20deg) drop-shadow(0px 0px 5px rgba(255, 190, 35, .5));
}

#cover-img {
	margin: 22px 0;
	transition: .2s linear;
	filter: contrast(1.5);
}

#cover-img:hover, #cover-img:focus {
	filter: contrast(1.5) drop-shadow(0px 0px 5px rgba(255, 159, 35, 0.37));
}

.hover { transition: .2s linear; }
.hover:hover { filter: drop-shadow(0px 0px 5px rgba(255, 159, 35, 0.62)); }

p {
	margin: 0;
	font-size: 24px;
}

main {
	position: absolute;
	height: 496px;
	width: 500px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	filter: unset;
}

#bottom-right {
	position: absolute;
	right: 2px;
	bottom: 2px;
	image-rendering: pixelated;
	
	transition: .1s ease-in;
	filter: contrast(1) drop-shadow(0 0 1px black) drop-shadow(0 1px black) drop-shadow(0 1px black);
}
	#bottom-right:hover, #bottom-right:focus {
		filter: contrast(2) drop-shadow(0 0 1px black) drop-shadow(0 1px black) drop-shadow(0 1px black);
	}
	#bottom-right:active {
		transition: .05s ease-in;
		bottom: 0px;
		filter: contrast(2) drop-shadow(0 0 2px black);
	}
	

#bottom-left {
	position: absolute;
	left: 5px;
	bottom: 5px;
	
	transition: .1s ease-in;
	color: rgb(129, 230, 255);
	filter: contrast(1) drop-shadow(0 0 1px black) drop-shadow(0 1px black) drop-shadow(0 1px black);
	font-size: 24px;
}
	#bottom-left a {
		color: rgb(194, 243, 255);
		animation: winter-blink .4s infinite;
	}

	@keyframes winter-blink {
		0% { color: rgb(194, 243, 255); }
		49% { color: rgb(194, 243, 255); }
		50% { color: rgb(129, 230, 255); }
		100% { color: rgb(129, 230, 255); }
	}

@media (max-width: 500px) {
	main {
	transform: translate(-50%,-50%) scale(calc(100vw / 500px));
	}
}