@font-face{
	font-family:"VT323";
	src:url(../fonts/VT323-regular.ttf);
}


*{
	font-family:"VT323";
	cursor: url(../images/cursors/default.png), auto;
}

::selection{
	color:white;
	background:#333;
}

::-webkit-scrollbar {
  width: 12px;
  height:12px;
}

::-webkit-scrollbar-track {
  background: black;
}

::-webkit-scrollbar-thumb {
  background: #444;
}

::-webkit-scrollbar-thumb:hover {
  background: #222;
}

body{
	user-select: none;	
	font-weight: bold;
	font-size: 2em;
	background:black;
}

#container{
	width: 800px;
	height: 800px;
	position: fixed;
	left: 50%;
	top:50%;
	margin-left: -400px;
	margin-top:-400px;
	overflow: none;
}

#container .inner{
	position: relative;
}


section{

	position: absolute;
	left: 0px;
	top:0px;
	width: 800px;
	height: 800px;
	/*background: #bbb;*/
	display: none;
	background: rgba(20,20,20,0.8);
}

@keyframes parallax_sec {  
  0% { background-position: -3584px 0px;} 
  100% {background-position: 0 0px; } 
}


.foreground, .midground, .background {
  right: 0px;
  bottom:0px;
  position: absolute;
  top: 0; left: 0;
  transform:translate3d(0,0,0); 
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background:  url(../images/graphics/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg {  
  0% { background-position: -3584px 100%;} 
  100% {background-position: 0 100%; } 
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background:  url(../images/graphics/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {  
  0% { background-position: -3000px 100%;} 
  100% {background-position: 0 100%; } 
}

.background {
  background-image:
    url(../images/graphics/background_mountain5.png),
    url(../images/graphics/background_mountain4.png),
    url(../images/graphics/background_mountain3.png),
    url(../images/graphics/background_mountain2.png),
    url(../images/graphics/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}



.button{
	padding:10px;
	border-radius:20px;
	background-color: #69554c;
	box-shadow: 3px 3px 1px white;
	display: inline-block;
	transition: .2s;
	text-transform: uppercase;
	font-size: 2em;
	color:white;
	letter-spacing: 10px;
	padding-right: 0px;
}

.button:hover{
	box-shadow: 6px 6px 1px white;
	transform: scale(1.2);
}

section nav{
	z-index: 9999;
	position: absolute;
	width: 100%;
	text-align: center;
}

section p{
	text-align: center;
}

section h1{

	margin:0;
	margin-top: 100px;
	color:#69554c;
	text-align: center;
	text-shadow: 1px 1px white;
}


.label{
	font-size:1em;
	color:#333;
	background: white;
    padding: 7px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

section#options .label{
	font-size: 2em;
}

.button.toggle{
	border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.button.toggle :not(.current){
	display: none;
}

.button.toggle .current{
	display: block;
}

section input{
	border:3px solid transparent;
	font-size:1em;
	padding:4px;
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
	width:6em;
}

section input:focus{
	outline: none;
	border-color:#333;
}

section#view #canvas{
}

section#view{
	z-index: -1;
}

.relative{
	position: relative;
}