body{
padding:0;
margin:0;
font: 16px/1.5 Futura, Helvetica, sans-serif;
}

.content iframe { width:600px; height:326px; }


h1{
  width:600px;
font-size:2.5em;
font-family: 'Fugaz One', cursive;
float:right;
transform: rotate(5deg);
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Safari and Chrome */
-o-transform: rotate(5deg); /* Opera */
-moz-transform: rotate(5deg); /* Firefox */
padding:0;
}

#extras{
width:110px;
background-color: #333;
color:white;
padding:4px 1px;
position:absolute;
right:0;
top:0;
}
#score, #lang{
background-color: #555;
width:103px;
float:right;
margin:1px;
}
#lang{
float:right;
width:103px;
margin:5px;
}
#lang button{
margin:0 5px;
}
.Electrolize{
  font-family:'Electrolize', sans-serif;
  font-size:0.8em;
}

header{
position:absolute;
z-index:-1;
top:1%;
padding:5px;
width:85%;
margin:0px 5%;
max-width:1500px;
min-height:40px;
z-index:10;
}

#navigaatio{
text-align:center;
padding:12px;
width:24%;
max-width:250px;
min-width:100px;
float:left;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}

#mainnav
{
width:200px;
float:left;
padding:10px 0;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}


#subnav{
margin:20px 0;
border:0px solid red;
-webkit-border-radius:100px;
-moz-border-radius:100px;


background-image: url("gamebg.png");
}


#content{
width:70%;
min-width:810px;
max-width:900px;
margin:15% 2px 5% 25%;
padding:0;
z-index:1;
height:610px;
background-color: #FFF;
}
header, #navigaatio, #content{


}
#maincontent{
border:solid #222 4px;
width:600px;
height:600px;
padding:0;
margin:0;
float:left;
}

#sidebar{
border:solid #222 3px;
width:192px;
height:600px;
padding:0;
margin:auto;
float:right;
}


a, a:hover, a:visited{
color:#FFF;
text-decoration:none;
}

a:hover{
color:#222;
border:0;
}

#maincontent a ,#maincontent a:hover,#maincontent a:visited{
color:#DD5454;
font-size:1em;
text-decoration:none;
font-weight:bold;
}

#blackbutton{

}
#maincontent a:hover{
color:#222;
}
#maincontent p, #maincontent H2{
padding:4px 30px;
}

#maincontent p{
font-size:0.8em;
}

#maincontent ul{
padding:4px 30px;
font-size:0.8em;
}


#buttons{
  width:100%;
  text-align:center;
}

#gallery{
  width:100%;
  text-align:center;
}

#buttons button{
  margin:5px;
  width:50px;
  height:30px; }
#gallery img{
  width:100%;
  max-width:530px;
  min-width:100px;
}



@media screen and (max-width:1100px) {
#navigaatio{
margin:160px 0 2px auto;
width:100%;
height:150px;
padding:0;
max-width:800px;
min-width:760px;
float:none;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}

#subnav{
float:right;
padding:0;
margin:0;
width:100%;
}



#content, header{
width:98%;
margin:8% 5%;
float:none;
}

header{
  width:100%;
  padding:0 5% 5% 5%;
  height:100px;
}
h1{
  	width:100%;
    margin:0 5% 0 5%;
  min-width:500px;
  font-size:2.1em;
  transform: rotate(1deg);
-ms-transform: rotate(1deg); /* IE 9 */
-webkit-transform: rotate(1deg); /* Safari and Chrome */
-o-transform: rotate(1deg); /* Opera */
-moz-transform: rotate(1deg); /* Firefox */
	}
#mainnav{
  width:200px;
  margin:0;
  float:left;
 } 
#content{
margin:0px auto;
}

}


@media screen and (max-width:615px) {
#extras{
width:230px;
}
#navigaatio{
width:100%;
max-width:480px;
min-width:480px;
height:240px;
padding:0;
float:none;
margin:140px 0 2px 0;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}
#subnav{
padding:0;
float:none;
width:100%;
}

#content{
margin:35px 0;
padding:0;
width:610px;
height:1400px;
}
header{
width:100px;
margin:10px 2px 2px 2px;
padding:0;
}
#sidebar{
float:left;
}
h1{
  font-size:1.5em;
	float:none;
    padding:15px 0 0 0;
  transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-o-transform: rotate(0deg); /* Opera */
-moz-transform: rotate(0deg); /* Firefox */
	}

 .Electrolize{
  float:left;
 } 
#maincontent, #sidebar{
margin:0;
padding:0;
}
#subnav{
margin:0;
}

}

.button, .buttonc, .blackbutton{
font-size:1em;
display:inline-block;
text-decoration:none;
text-align:center;
color:#fff;
background-color:#dd5454;
border:2px solid #dd5454;
-webkit-border-radius:45px;
-moz-border-radius:45px;
border-radius:45px;
margin:1px;
}

.button:hover{
font-size:1.6em;
color:#dd5454;
background-color:#FFF;
border:4px solid #FFF;
-webkit-border-radius:45px;
-moz-border-radius:45px;
}

.button, .button:hover, header, .blackbutton:hover{
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}


#mainnav .button, #mainnav .buttonc, .blackbutton{

height:70px;
width:70px;
margin:1px;
font-size:0.7em;
display:inline-block;
background-color:#222;
border:1px solid #222;
-webkit-border-radius:45px;
-moz-border-radius:45px;
}
#mainnav .button:hover, .blackbutton:hover{
height:75px;
width:75px;
margin:0px;
}
#mainnav .buttonc{

}
#mainnav .button:active, #mainnav .button:hover, #mainnav .buttonc:hover{

}
footer{
clear:both;
text-align:center;
background-color:#333;
color:#FFF;
margin:10px 0;
}

.clear{
width:100%;
clear:both;
color:red;
}