@charset "UTF-8";

@font-face {
	font-display: auto;
}

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

::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.07);
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}

::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}

::-webkit-placeholder {
	color: #999;
	font-size: 17px;
}

::-ms-placeholder {
	color: #999;
	font-size: 17px;
}

::placeholder {
	color: #999;
	font-size: 17px;
}

hr {width: 100%; margin: 5px 0;}
a, a:link, a:visited {color: lightblue;}
a:hover {color: #ececec;}
a:active {color: #aaa;}

@font-face {
	font-family: SegoeUI;
	src: url(../fonts/SegoeUI.ttf);
}

@font-face {
	font-family: AmaticSC;
	src: url(../fonts/AmaticSC.ttf);
}

html {
	font-family: Calibri, Arial, sans-serif;
	overflow: hidden;
	height: 100%;
}

h1 {
	text-align: center;
	font-size: 150px;
	color: #dadada;
}


body {
	height: 100%;
	width: 100%;
	background-color: #8e44ad;
	overflow: hidden;
	color: white;
	position: relative;
	background-image: radial-gradient(at left bottom, rgb(255, 255, 255) 0%, rgb(237, 253, 255) 13.4%, rgba(86, 88, 196, 0.87) 52.6%, rgb(0, 0, 0) 83.1%);
}

main {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

body {
	overflow: hidden;
	background: radial-gradient(#1b1b1b, #001533);
}

p {
	color: cadetblue;
	text-align: right;
	font-size: 25px;
}

sub {
	font-size: 0.7em;
	color: #999
}

#back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#stars,
#stars-2,
#small-stars,
#small-stars-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	margin: -300px 0 0 -300px;
	background: url(../img/stars-large.png) no-repeat center center;
	-webkit-animation-name: starsLarge;
	-webkit-animation-duration: 400s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes starsLarge {
	from {
		-webkit-transform: rotate(0deg) scale(3);
		opacity: .1;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}

#stars-2 {
	-webkit-animation-name: starsLargeAlt;
	-webkit-animation-duration: 500s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes starsLargeAlt {
	from {
		-webkit-transform: rotate(180deg) scale(3);
		opacity: .25;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}

#small-stars,
#small-stars-2 {
	background: url(../img/stars-small.png) no-repeat center center;
	-webkit-animation-duration: 350s;
	-webkit-animation-name: starsSmall;
}

#small-stars-2 {
	-webkit-animation-name: starsSmallAlt;
	-webkit-animation-duration: 580s;
}

@-webkit-keyframes starsSmall {
	from {
		-webkit-transform: rotate(360deg) scale(3);
		opacity: .25;
	}
	to {
		-webkit-transform: rotate(0deg) scale(.5);
		opacity: 0;
	}
}

@-webkit-keyframes starsSmallAlt {
	from {
		-webkit-transform: rotate(0deg) scale(3);
		opacity: .1;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}