html{
	overflow-y:scroll;
	}
body{
	background-color:#303030;
 	height: 100%;
 	margin: 0;
  	padding: 0;
  	color:white;
  	font-family: Arial, Helvetica, sans-serif;

}
p{
	font-size:large;
	word-wrap:normal;
}

a{
	color:white;
}
div.gamelist {
    /*border: 1px solid #000;*/
    background-color:#333333;
}

div.gamelist:hover {
	background-color:#3B3B3B;
	}

div.gamelist img {
    width: 200px;
    height: 150px;
}

div.desc {
	display:table;
	width:200px;
    padding: 5px;
    height: 46px;
    color: white;
}
div.desc p{
	width:100%;
	display: table-cell; 
	text-align: center;
  	vertical-align: middle; 
  	
	}
}

* {
    box-sizing: border-box;
}

.gamedivider{
	display:inline-block;
	text-align:center;
	background-color:#333333;
	
	width:200px;
	height:206px;
	margin:5px;
	vertical-align:top;
	
}

.gamedivider .textholder{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:206px;
}

.gamedivider .textholder .text{
	font-size:50px;
}


.responsive {
	display: inline-block;
    padding: 5px;
    width: 200px;
    
}
h1{
	padding:5px;
	text-align: center;
	padding-bottom:5px;
	padding-top:5px;
	color:white;
	line-height:0px;
	font-size:7.8vw;
	font-family:Arial, Helvetica, sans-serif;	
}
h2 {
    padding: 0px;
    text-align: center;
    color:white;
    font-size:20px;
    width: 100%;
    border-style: none;
    }

h3{
	padding: 5px, 10px;
	text-align: right;
	color: white;
	width: 400px;
	border-style: solid;
	border-width: 1px 0px 1px 5px;
}

h4{
	
	text-align: center;
	color: white;
	font-size:100px;
}
h5{
	text-align: center;
	color: white;
	font-size:50px;
	line-height:10px;
}
h6 {
    padding: 0px;
    text-align: center;
    color:white;
    font-size:25px;
    width: 100%;
    border-style: none;
    }

    
#container { 
	width: 100%; 
	margin: 0 auto;
	text-align:center;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.error {
	color: #FF0000;
}

#navwrapper{
	margin:0;
	padding:0;
	display: flex;
	width:100%;
	align-items: center;
    justify-content: space-between;
}

#navwrapper #searchwrapper{
	display:flex;
	align-items: center;
	margin:0px 10px 0px 10px;
	
}

#navwrapper #searchwrapper p{
	margin:0px 10px 0px 0px;
}

#nav{
	display:flex;
	list-style: none;
	margin:0;
	padding:0;
	text-align:center;
}
#nav li{
	
	position:relative;
	display:inline;
}

#nav a{
	font-size: 20px;
	text-decoration:none;
	display:inline-block;
	width: 300px;
	padding:10px 0px 10px 0px;
}
#nav ul{
	border: 1px #373737 solid;
	border-width:1px;
	position:absolute;
	left:-9999px;
	margin:0;
	padding:0;
	text-align:center;
	background-color:#333333;
	z-index: 1;
}
#nav ul li{
	display:block;
}
#nav li:hover ul{
	
  	left: 0%;
  	width: 298px;
  	margin: 0;
}
#nav li:hover a{
	font-size: 20px;
	text-decoration:none;
	background:#373737;
}
#nav li:hover ul a{
	font-size: 18px;
	text-decoration:none;
	word-wrap:normal;
	background:none;
}
#nav li:hover ul a:hover{
	font-size: 18px;
	text-decoration:underline;
	word-wrap:normal;
	background:#3B3B3B;
}
#nav ul a{
	font-size: 18px;
	text-decoration:none;
	white-space:nowrap;
	display:block;
	border-bottom:1px solid #3b3b3b;
}

.active{
	font-weight:bold;
	font-style:italic;
}


#livesearch{
	position:absolute;
	background-color:#333333;
	left:0px;
	right:0px;
	padding:5px;
	width:inherit;
	max-height:300px;
	overflow:auto;
}

#livesearch a{
	text-decoration:none;
	font-weight:normal;
}

#livesearch a:hover{
	text-decoration:underline;
	font-weight:bold;
}

#navwrapper form{
	position:relative;
}
#navborder{
	border: 1px #ffffff solid;
	border-width:1px 0;
	margin:0;
	padding:0;
}
.g-recaptcha {
        display: inline-block;
}


#footer{
	display:flex;
	flex-direction:column;
	align-items: center;
    justify-content: space-around;
}

#footer h2{
	margin:10px;
}

#footer p{
	margin:10px;
	color: #707070;
	text-align: center;
	width: 100%;
}


#socialcontainer{
	display:flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-evenly;
}

.sociallink{
	display:flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
    margin:10px;
    width: 160px;
    border-radius:100px;
}

#snapchat .sociallink{
	background-color: #fffc00;
}

#snapchat p{
	color:black;
}

#snapchat:hover .sociallink{
	background-color: #FFFF6F;
}

#instagram .sociallink{
	background-color: #bc2a8d;
}

#instagram p{
	color:white;
}

#instagram:hover .sociallink{
	background-color: #DA58AF;
}

#facebook .sociallink{
	background-color: #3b5998;
}

#facebook p{
	color:white;
	
}

#facebook:hover .sociallink{
	background-color: #5F7EC0;
}

#socialcontainer p{
	margin:10px 10px 10px 15px;
	width:90px;
}

.sociallink svg{
	margin:10px 15px 10px 10px;
}

#socialcontainer a{
	text-decoration:none;
}

#SortContainer{
	margin:0px 20px 0px 0px;
	padding:0px;
	display: flex;
	width:100%;
	align-items: center;
    justify-content: flex-end;
}
#SortContainer form{
	margin:0px 15px 5px 0px;
}

#SortContainer form *{
	margin:0px 10px 0px 0px;
}


@media only screen and (max-width: 1230px){
	#navwrapper{
		width:100%;
		flex-direction: column;
	}
	#navwrapper form{
		position:relative;
		margin:10px 5px 10px 5px;
	}

}


@media only screen and (max-width: 930px){
	#nav{
		flex-direction:column;
	}
	

}

@media only screen and (max-width: 600px){
	#socialcontainer{
		flex-direction: column;
	}
}