@font-face {
	font-family:"ibm-vga";
	src:url('/fonts/ibm-vga.woff');
}

@font-face{
	font-family:"ps55-re";
	src:url('/fonts/ibm-ps55re.woff');
}

@font-face{
	font-family:"cordata";
	src:url('/fonts/cordata-ppc400.woff');
}

@font-face{
	font-family:"txl1";
	src:url('/fonts/toshibatxl1.woff');
}

@font-face{
	font-family:"apricot";
	src:url('/fonts/apricot.woff');
}


h1, h2, h3{
	font-family:"ps55-re";
	font-weight:normal;
	text-align:center;
	font-size:24px;
}

p, ul, li{
	font-family:"cordata";
	font-size:15px;
}

b, strong, i, blockquote{
	font-family:"txl1";
	font-style:normal;
	font-weight:normal;
	font-size:15px;
}

a{
	font-family:"apricot";
	color:#003f5b;
}

code{
	font-family:"ibm-vga";
	font-size:15px;
}

hr {
	color:#003f5b;
}

body{
	background-color:#d8d8d8;
	background-image:url(/images/cloak.jpg)
}

.container{
	max-width: 800px;
	display: grid;
	grid-gap: 10px;
	grid-template:
		"main navbar"
		/ 4fr 1fr
}

.center{
	display:flex;
	justify-content:center;

}

main{
	grid-area: main;
	background: #ff6462;
	padding:10px;
	min-height: 1000px;
	border: 2px solid #003f5b;
}

aside{
	grid-area: navbar;
	background: #ff6462;
	padding:10px;
	border: 2px solid #003f5b;
	max-height: 250px;
}



@media (max-width: 800px) {
  .container {
    grid-template:
    "navbar"
    "main"
  }

  .center {
	  display:unset;
}