@font-face { font-family: pixelfont; src: url('font.ttf'); } 

.wrapper {
	min-height: 100vh;
    display:flex;
    flex-direction: column;
	
	/*aaaaaaaaaaaaa*/
	/*align-items: center;
	justify-content: center;
	align-content: center;*/
}

body {
	
	margin: 0;
	/*padding: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	min-height:100%;
	position:relative;*/
	background-image: url("bg.png");
	background-repeat: repeat-x repeat-y;
	background-position: 50% 0px;
	
	font-family: pixelfont;
	font-size: 32pt;
	line-height: 0.6em;
	color: white;
	/*text-shadow: 0px 2px 4px black;*/
	text-align: center;
}

html, body,{
	min-height: 100%;
	min-width: 100%;
	padding: 0;
	margin: 0;
}

main {
	flex: 1;
	flex-grow: 100;
    /*display:flex;*/
    flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;

	
	/*aaaaaaaaaaaaa*/
	align-items: center; 
}

@media screen and (min-width: 1024px) {
	main {
		/*aaaaaaaaaaaaa*/
		padding-top: 100px;
		padding-bottom: 100px;
		padding-left: -5vw;
		margin-left: 500px;
	}
}

img#thumb {
    max-width: 100%;
    height: auto;
	width: 5vw;
}	

img#title {
    max-width: 100%;
    height: 11vw;
	width: 32.6vw;
}	

img#banner {
    max-width: 100%;
    max-height: 100%;
	height: 12vmin;
	width: auto;
}

div#contentcontainer {
	width: 85%;
	height: 80%;
	/*display:inline-block;*/display: flex;
	flex-wrap: wrap;
	margin-left: 7.5vw;
	/*aaaaaaaaaaaaa*/
	align-items: center;
	justify-content: center;
    /*flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;*/
}

@media screen and (min-width: 1024px) {
	div#contentcontainer{
		margin: 0vh;
		display:flex;
		flex-wrap: nowrap;
		width: 100%;/*90%*/
		/*aaaaaaaaaaaaa*/
		justify-content: center;
		position:absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
	}
}

table, td, tr{
border-spacing:0;
}

.stonediv {
	z-index: 3;
	flex: 1;
	flex-grow: 1;
	/*flex-basis: 16vh;
	flex-grow: 1;
	flex-shrink: 1;*/
	/*margin: 0px;*/
	/*margin-right: 8px;*/
	/*position: absolute;*/
	width: 33vw;
	height: 50vh;
	/*height: 50vh;*/
	display: inline-block;
	line-height: 0.65em;
	margin: 8px;
	/*width:auto;
	height: auto;
	min-height: 12vh;*/
	font-size: 7.2vw;
	max-width: 18vw;
	text-align: center;
	border: 18px solid transparent;
	background-color: rgb(120,120,120);
	background-size: 75vmin auto;
	background-position: 50% 50%;
	border-image: url(border18.png) 18 round;
}

.stonediv:nth-child(3n) {
	flex-basis: 33%;
}
.stonediv:nth-child(1n) {
	flex-basis: 33%;
}
.stonediv:nth-child(2n) {
	flex-basis: 33%;
}

div#tau {
	font-size: 6.0vw;
	color: rgb(100,100,250);
	text-shadow: 0 4px 0 rgb(0,0,50);
	background-image: url("tau.png");
	/*background-position: 45% 50%;
	background-size: 100vmin auto;*/
	background-position: 50% 90%;
	background-size: 50vmin auto;
}

div#oth{
	font-size: 6.0vw;
	color:rgb(100,250,100);
	text-shadow: 0 4px 0 rgb(00,25,0);
	background-image: url("ld.png");
	background-position: 50% 30%;
	background-size: 75vmin auto;
}

@media screen and (min-width: 1024px) {
	.stonediv {
		font-size: 4.0vw;
		max-width: 10vw;
	}
	div#tau {
		font-size: 3.5vw;
	}
	div#oth {
		font-size: 3.5vw;
	}
	
}

@media screen and (min-width: 1366px) {
	.stonediv {
		/*max-width: 10vw;*/
		font-size: 3.5vw;
		max-width: 12vw;
	}
	div#tau {
		font-size: 3.0vw;
	}
		div#tau {
		font-size: 3.0vw;
	}
}

div#fth {
	color: rgb(250,250,100);
	font-style: bold;
	text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
	text-shadow: 0 4px 0 rgb(25,25,0);
	background-size: 50vmin auto;
	background-position: 48% 25%;
	background-image: url("fthbg.png");
}

div#sct {
	color: rgb(200,185,160);
	text-shadow: 0 4px 0 rgb(25,25,0);
	background-image: url("sector7.png");
	background-size: 70vmin auto;
	background-position: 50% 50%;
}

div#brg {
	color: rgb(250,150,100);
	text-shadow: 0 4px 0 rgb(45,22,0);
	background-image: url("brg.png");
	background-size: 50vmin auto;
	background-position: 53% 60%;
}



div#abt {
	color:rgb(255,250,250);
	text-shadow: 0 4px 0 rgb(50,50,50);
	background-image: url("abt.png");
	background-position: 50% 70%;
	background-size: 40vmin auto;
}

h1 {
	font-style: bold;
}

div#stonecontentdiv {
	z-index: 3;
	/*flex-basis: 16vh;
	flex-grow: 1;
	flex-shrink: 1;*/
	display: flex;
	flex-wrap: wrap;
	margin: 0px;
	width: 100%;
	height: 50vh;
	display: flex;
	/*width:auto;
	height: auto;
	min-height: 12vh;
	min-width: 12vh;
	max-width: 18vh;
	max-height: 18vh;*/
	font-size: 4vmin;
	text-align: left;
    /*border: 18px solid transparent;
	background-color: rgb(120,120,120);
    border-image: url(border18.png) 18 round;*/
}


iframe, img#content {
	/*height: calc(50vh - 36px);*/
	margin-top: 5px;
	padding-top: 1px;
	width: 75vw;
	height: auto;
	min-height: 35vh;
	max-height: 67.5vh;
	left: 5%;
	border: 18px solid transparent;
	background-color: rgb(120,120,120);
    border-image: url(border18.png) 18 round;
}

@media screen and (min-width: 1024px) {
	iframe, img#content {
		width: 30vw;
		height: auto;
		max-height: 50vh;
	}
}

div#textcontainer {
	/*height: calc(50vh - 36px);*/
	width: 75vw;
	height: 49vh;
	padding: 5px;
	display:block;
	overflow: auto;
	line-height: 0.6em;
	text-align: left;
	font-size: 3.8vh;
	margin-left: 0px;
	flex-grow: 0;
	flex-shrink: 0;
	border: 18px solid transparent;
	background-color: rgb(80,80,80);
    border-image: url(border18.png) 18 round;
}

@media screen and (min-width: 1024px) {
	div#textcontainer {
		margin-left: 16px;
		width: 50vw;
		font-size: 0.75em;
	}
}

a#return {
	bottom: 0px;
}

p#line {
	line-height: 60%;
}

p {
	line-height: 0.6em;
}

h1, h2, h3, h4, h5, h6{
	line-height: 0.7em;
	margin-top:10px;
	margin-bottom:0px;
	font-size: 1.5em;
}

@media screen and (min-width: 1024px) {
	h1, h2, h3, h4, h5, h6{
		font-size: 1.8em;
		line-height: 0.7em;
	}
}


/*h1 {
	font-size: 6vmin;
}

h2 {
	font-size: 5vmin;
}*/

canvas {
    position:absolute;
}
div#headerwrapper{
	height: calc(7vh + 168px);
	width: 100%;
	display: flex;
}
header {
	z-index: -1;
	height: 7vh;
	background-image: url("stone.png");
	background-position: 50% calc(7vh - 2px);
	padding-top: 6px;
	padding-bottom: 16px;
	float:left;
	flex-grow: 100;
	/*
	
		text-align: center;


	padding-bottom: 8px;
	margin-bottom: -16px;
	
	*/
}
div#headerbot{
	z-index: 0;
	height: 168px;
	flex-grow: 100;
	bottom:0px;
	position:relative;
	background-position: 50% 0px;
	background-image: url("bannerbot.png");
	background-repeat: repeat-x;
}
div#footerwrapper{
	height: calc(6vh + 96px);
	width; 100%;
	display: flex;
	flex-direction: column;
}
div#footer {
	z-index: 2;
	height: 6vh;
	/*bottom: 0px;*/
	flex-grow: 100;
	float:left;
	bottom: 0px;
	background-image: url("stone.png");
	background-attachment: local;
	background-position: calc(50% + 16px) 32px;
	background-clip: padding-box;
	text-align: center;
	font-family: pixelfont;
	font-size: 16pt;
	line-height: 0.6em;
	text-align: center;
}
div#footertop{
	flex-grow: 100;
	z-index: 2;
	top: 0px;
	position:relative;
	margin-top: 16px;
	height: 96px;
	background-position: 50%; 0px;
	background-image: url("footertop.png");
	background-repeat: repeat-x;
}

/*.button {
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.button:hover {
    box-shadow: 0px 0px 50px #FF0000;
}
.overlay {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: opacity 0.5s;
	visibility: hidden;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-image: url("bg.png");
	background-repeat: repeat-x repeat-y;
}
.overlay:target {
	position: fixed;
	visibility: visible;
	opacity: 1;
}
.popup {
	margin: auto;
	border: 18px solid transparent;
	background-color: rgb(120,120,120);
    border-image: url(border18.png) 18 round;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	transition: visibility 3s ease-in-out;
}

.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.popup .close:hover {
	color: orange;
}*/