@font-face {
	font-family: dotmatrix;
	src: url("./fonts/5by7.ttf");
}

body {
	background-color: black;
	color: white;
	width: 98%;
	height: 90%;
    margin:0;
    padding:0;
	text-align: center;
}

h1 {
	font-family: dotmatrix;
	font-size: 6vw;
	line-height: 8vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
	color: #00FF00;
}

h2 {
	font-family: dotmatrix;
	font-size: 3vw;
	line-height: 4vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
	color: #00FF00;
}

a {
	display: inline-block;
	cursor: pointer;
	color: #00FF00;
	text-decoration: none;
	margin: 3px;
	padding: 2px 8px;
	font-size: 1.2em;
	line-height: 1.5em;
	
	border-style: solid;
	border-width: 1px;
}

a:hover {
	color: #FFFF00;
}

p {
	font-family: dotmatrix;
	font-size: 1.2em;
	line-height: 1.5em;
}

.pagewrap {
	display: inline-block;
	width: 70%;
}

.topbar {
	display: inline-block;
	text-align: left;
	width: 100%;
	height: 18vw;
	background-image: url("https://alienorigin.io/images/topbanner.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.title {
	display: inline-block;
	width: 50%;
	text-align: center;
}

.menubar {
	font-family: dotmatrix;
	display: inline-block;
	text-align: center;
}

.infobar {
	font-family: dotmatrix;
	display: inline-block;
	text-align: center;
}

@media only screen and (max-width: 600px) {
	.pagewrap {
		width: 100%;
	}
	
	.topbar{
		background-image: none;
		height: 6em;
		line-height: 7em;
	}
	
	.title{
		width: 100%;
	}
	
	h1 {
		font-size: 2em;
		margin-top: 1em;
	}
	
	h2 {
		font-size: 1.5em;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	p {
		font-size: 1em;
	}
}