*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#canvas-container {
	display: flex;
	justify-content: center;
	align-items: center;
	xmargin-top:10px;
}

#canvas {
	xborder:10px solid #1a1a1a;
	xborder:10px solid slategrey;
	xborder-style:inset;
	xborder:1px solid black;
	xborder-style:outset;
	xbox-shadow: 5px 5px 5px rgba(0,0,0,0.9);

	ximage-rendering: pixelated;
}


body{
	font-family:arial;
	xfont-family: 'Roboto', sans-serif;
	background-color: #000000;
	xbackground-color:rgb(46, 46, 46);

	color: #c6d2c8;
	overflow:hidden;
	padding:0px;
	margin:0px;
	user-select:none;
	xbackground-image: url('img/geo.png');
}

a { color: #0000EE; }
a:visited { xcolor: #551A8B; }
a:hover { color: #3366ff; }
a:active{color: #ff6600; }

div#generate {
	display:inline-block;
	position:absolute;
	xmin-width:1000px;
	bottom:0;
	right:0;
	margin: auto 10px 10px auto;
	opacity:0;
	border:1px solid grey;
	background-color:rgba(0,0,0,0.5);
	padding:50px;
	cursor:pointer;
	font-size:5em;
	font-family:Consolas, monospace;
	xwidth: 500px;
}

div#generate:hover {
	opacity:1;
}

div#generate:active {
	color:lime;
}