body{
		text-align:center; 
		color:white;
		font-family: serif;
		padding-top:3em;
		background-color:black;
		background-image: url("./starfield.png");
		background-repeat: repeat;
		}
	
	h1{
		padding-top:5em;
	}

	h3{
		display: inline-block;
	}
	
	h3 a{
		all: unset;
		cursor: pointer;
	}

	p {
		width: 100%;
		max-width: 640px;
		font-size: 40px;
	}

	a{
		cursor:pointer;
		color:white;
	}

	a:visited {
		all: unset;
	}

	ul {
		font-size: 28px;
		text-align: left;
	}

	li{
		padding: 10px 0px;
	}
	
	.center {
		margin: auto;
		padding: 10px;
		width: 80%;
	}

	.grow{
		transition: all .15s ease-in-out;
	}

	.grow:hover{
		transform: scale(1.1); 
	}

	#meteor{
		animation-name: streak;
		animation-delay: 6s;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-iteration-count: 1;
		color: white;
		position: fixed;

	}

	#twinkle-mask{
		animation-name: twinkle;
		animation-delay: 0s;
		animation-duration: 15s;
		animation-fill-mode: backwards;
		animation-timing-function: ease;
		animation-iteration-count: infinite;
		position: fixed;
		width:  25%;
		height: 25%;
		background-color: black;
		opacity: 50%;
		z-index: -1;

	}

	@keyframes streak{
		0%   {bottom: -3%; left: 40%; font-size: 10%;}
		50%  {bottom: 9%; left: 70%;  font-size: 150%;}
		100% {bottom: 20%; left: 103%; font-size: 10%;}
	}

	@keyframes twinkle{
		0%   {top: 0%; left: 0%;}
		25%  {top: 50%; left: 75%; opacity: 25%;}
		40%  {top: 60%; left: 60%; opacity: 60%;}
		50%  {top: 0%; left: 50%; opacity: 50%;}
		60%  {top: 10%; left: 80%; opacity: 25%;}
		75%  {top: 50%; left: 0%; opacity: 10%}
		100% {top: 0%; left: 0%;}
	}