@font-face {
  font-family: "Header Title";
  src: url("/css/title.ttf");
}

body {
	background-color: #f5f6fa;
	color: #130f40;
	padding: 0px;
	text-align: center;
	font-family: 'Roboto',​ sans-serif;
	margin-top: 60px;
}

#container {
	margin: 0 auto;
	width: 1128px;

	border-width: 1px;
	border-style: solid;
	border-color: #a4b0be;
}


header {
	background-color: #ffffff;
	font-size: 26px;
	padding: 10px;
	font-family: "Header Title";
}

nav {
	background: #ced6e0;
	padding-left: 20px;
	overflow: auto;
	text-align:left;
	font-size: 16px;

	box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.5);

	border-top-width:1px;
	border-bottom-width:1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-color: #a4b0be;
	height:40px;
}


nav > div {
	display: inline-block;
	padding: 10px;
}

nav > div > a {
	padding: 10px 15px;
	font-weight: bold;
	color: #060606;
	text-decoration:none;
}

nav > div > a:hover,
nav > div > a:active,
nav > div > a:focus
{
	color: #060606;
	background: #a4b0be;
	border-radius: 10px;
	box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
}


footer {
	padding:4px;
	border-top-width:1px;
	border-top-style: solid;
	border-color: #a4b0be;
}


@media (max-width: 1052px) {
	#container{
		width: 95vw;
	}
}


@media (max-width: 720px) {
	nav {
		font-size: 14px;
		padding-left: 5px;
		height:37px;
	}
	#page {
		font-size:15px;
	}
	nav > div {
		padding: 10px 1px;
	}
	nav > div > a {
	padding: 5px 5px;
	}

	nav > div > a:hover,
	nav > div > a:active,
	nav > div > a:focus
	{
		color: #060606;
	}
}