/* The fonts */

@font-face {
    font-family: 'AileronBold';
    src: url('fonts/Aileron-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AileronRegular';
    src: url('fonts/Aileron-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AileronUltraLight';
    src: url('fonts/Aileron-UltraLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AileronBlack';
    src: url('fonts/Aileron-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Route159Regular';
    src: url('fonts/Route159-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* The basics */

html {
	background-attachment:fixed;
	background:linear-gradient(to bottom,
		#00b792 0em,
		#444466 15em,
		#00b792 500em) no-repeat;
}

body {
	background-image: url(famicom-cartridge.svg);
	background-repeat: repeat-x;
	background-size: 30vH;
	font-family: 'AileronLight', sans-serif;
  font-weight: normal;
  font-style: normal;
	color: #444466; 
	align-items: center;
	margin:0;
}


/* Links and Highlights */

main a, main a:active, main a:visited {
	color: #00b792;
	text-decoration: none;
}

main a:hover {
	color: #00b792;
	text-decoration: underline;
}

nav a, nav a:active, nav a:visited {
	color: #444466;
	text-decoration: none;
}

nav a:hover {
	text-decoration: none;
	color: #00b792;
}

.highlight, .highlight a, .highlight a:visited, .highlight a:hover {
	background-color: #00b792;
	color: #dddddd;
}

.unlink {
	color: #00b792;
}

/* MUHFLEXBOAX */

#container {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#centeritem {
	background:linear-gradient(to bottom,
		#ffffffdd 0em,
		#ffffff 15em,
		#ffffff 18em) no-repeat;
	display: flex;
	width: 90%;
	max-width: 800px;
	flex-direction: column;
  height: 100%;
	min-height: 100vh;
}

/* HTML5YO */

header {
	width:50%;
	padding-left: 2.3vw;
	padding-top: 1vw;
}

header a img:hover {
	filter: sepia(100%) brightness(150%) saturate(1500%) hue-rotate(138deg);
}

nav {
	color: #444466;
	font-family: 'AileronBlack', sans-serif;
	font-size: calc(0.6em + 1vW + 1vH);
	width: 70%;
	line-height: calc(0.74em);
	word-spacing: 0.5vw;
	letter-spacing: -0.15vH;
	text-transform: uppercase;
	padding-left: 2.2vw;
	padding-right: 2.2vw;
	padding-top: 0;
	margin-top: 0;
}

main h1 {
	color: #00b792;
	font-family: 'AileronUltraLight';
	font-weight: bold;*
	font-family: 'AileronBlack', sans-serif;
	font-size: calc(1em + 2vW + 1vH);
}

main h2 {
	color: #00b792;
	font-family: 'AileronUltraLight'; 
	font-weight: bold;
	font-size: calc(0.5em + 1.5vW + 0.75vH);
	line-height: calc(0.4em + 1.4vW + 0.7vH);
}

main {
	font-family: 'Route159Regular';
	/*font-size: calc(0.5em + 0.5vW + 0.5vH);*/
	font-size: 16px;
	line-height: 15px;
	letter-spacing: -0.05em;
	word-spacing: 0.25em;
	/*line-height: calc(0.5em + 0.5vW + 0.6vH);*/
	padding-top: 2em;
	padding-left: 0.1em;
	padding-right: 0.1em;
	flex-grow: 1;
	margin-left: 2vw;
	margin-right: 2vw;
}

main p {
	padding-left: 0.05em;
	padding-right: 0.05em;
}

@media screen and (min-width: 320px) {
  main {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
		line-height: calc(15px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1024px) {
	main {
		font-size: 22px;
		line-height: 22px;
  }
	main h1 {
		font-size: 40pt;
		line-height: 40pt;
	}
	main h2 {
		font-size: 28pt;
		line-height: 29pt;
	}
}

.miniblurb {
	width: 50%;
}

footer {
	background:linear-gradient(to bottom,
		#00b79200 0%,
		#00b79244 100%) no-repeat;
	font-size: calc(0.3em + 0.3vW + 0.3vH);
	flex-shrink: 1;
	padding-left: 2.3vW;
	height: 10em;
}


/* Images */

img {
	width: 100%;
}

.row {
	display: flex;
	margin: 2vw;
	align-items:   center;
}

.row img {
	padding: 1%;
	min-width: 0;
}

/* News Table */

td {
	vertical-align: top;
}

td:first-child {
	font-weight: bold;
	padding-right: 0.5em;
}

/* The stuff for the separate pages */

#center {
	display: flex;
	justify-content: center;
	align-items:center;
/*	height: 95vH;*/
}

#container-page
        {
        display: -webkit-flex;
        display: flex;
	flex-direction: column;
        width: 100%;
	align-items: center;
	justify-content: center;
}
#top-bar {
	display: flex;
	background-color: black;
	color: #ffffff; 
	flex-direction: row;
	width: 80%;
 	justify-content: space-between;
	outline: 1px solid black;
}
#menu-page {
        display: flex;
        justify-content: right;
        align-items: center;
	padding-top: 0.8vw;
        height: 5vH;
/*        font-weight: bold;*/
        font-size: 3vw;
        word-spacing: 1vw;
	margin-right: 2vw;
}
#menu-page a, a:active, a:visited, a:hover {
	color: #ffffff;
	text-decoration: none;
        cursor: pointer;
}
#pagetitle {
	font-family: 'AileronUltraLight';
	align-items: center;
	justify-content: right;
	font-size: 7vH;
	margin-left: 2vw;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

#page-content {
	display: flex;
	font-family: 'AileronRegular', sans-serif;
	flex-direction: column;
/*	height: 90vH;*/
	align: center;
	width: 80%;
	background-color: white;
	/*color: black;*/
	padding-bottom: 10vw;
	padding-top: 2vw;
	outline: 1px solid black;
}