:root {
  --primary-color: #101010; /* Sfondo scuro */
  --secondary-color: #404040; /* Sfondo Divs */
  --footer-color: #333333; /* Sfondo menu e footer, used in PHP pages */
  --border-color: #202020;
  --font-color: #a69150;
  --font-color-dark: #726437;

  --menu-width: 25%;
}

@font-face {
    font-family: "title";
    src: url("fonts/EvilEmpire-4BBVK.woff") format('woff');
}
@font-face {
    font-family: "wow";
    src: url("fonts/LifeCraft_Font.woff") format('woff');
}

body
{
	z-index: 1;
	font-family: verdana, arial, serif;
	/*background-image: url("images/general_background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
    background-color: var(--primary-color);
    min-height: 100%;
	cursor: url(images/pointers/default.png), auto;
}

#myLoadingGif {
	z-index: 10000;
	width: 100%;
	height: 100%;
}

a {
text-decoration: none;
cursor: url(images/pointers/hover.png), auto;
}

a:hover div {
	color: var(--font-color-dark);	
}

div.background {
	/**background-image: url("images/login.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
	background-color: var(--primary-color);
	padding-bottom: 20vh;
	min-height: 100%;
}


div.home_footer {
	position: fixed;
	bottom:0;
	width: 960px;
	z-index: 1000;
	height: 7vh;
	box-shadow: 0px 15px 10px 25px #111;
}

div.home_menu {
	position: fixed;
	top:0;
	width: 960px;
	z-index: 1000;
	height: 10vh;
	box-shadow: 0px 25px 10px -15px #111;
}

div.home_menu_left {
	float: left;
	height: 100%;
	text-align: center;
	width: var(--menu-width);
	text-shadow: 2px 2px 4px #000000;
	}

div.home_menu_center {
	text-align: center;
	float: left;
	height: 100%;
	border-left: 1px solid var(--font-color);
	width: var(--menu-width);
}

div.home_menu_right {
	border-left: 1px solid var(--font-color);
	float: left;
	height: 100%;
	text-align: center;
	width: var(--menu-width);
}

div.home_center {
	overflow: auto;
	margin: 0 auto;
	width: 960px;
}

div.home_center_left {
	width: 24%;
	float: left;
	margin-right: 1%;
}

div.home_center_right {
	width: 75%;
	float: right;
}

div.sanet_container {
	color: var(--font-color); /* If no color specified use default one*/
	width: 100%;
	padding: 2%;
	background-color: var(--secondary-color);
	box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);
	border-radius: 4px;
	border-style: inset;
	border-color: var(--secondary-color);
	margin-bottom: 1%;
}


div.home_section_title {
	color: var(--font-color);
	font-size: 4vh;
	text-align: center;
	font-family: title;
	text-shadow: 2px 2px 4px #000000;

}

div.home_section_subtitle {
	color: var(--font-color-dark);
	font-size: 3vh;
	text-align: center;
	font-family: title;
	text-shadow: 1px 1px 2px #000000;

}

div.home_section_text {
	color: var(--font-color);
	font-size: 1.5vh;
	text-align: center;
	font-family: arial;

}

div.home_center_right_banner {
	width: 100%;
}

div.home_center_right_games {
	width: 100%;
	height: 60vh;
}

div.menu_spacing {
	height: 10vh;
	width:100%;
	}

div.home_center_right_games_icon_background:hover {
	color: white;
	font-size: 30;
	font-family: title;
	writing-mode: sideways-lr;
	box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);
	opacity: 1.0;
	z-index: 100;
}

div.home_center_left_wowsettings {
  box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.6);
  background-image: url('images/wow_settings.png');
  background-size: 100% 100%;
  width: 100%;
  height: 10vh;
}

div.home_center_left_wowsettings:hover {
	box-shadow: none;
	opacity: 1.0;
	z-index: 100;
  transition: 0.5s;
}

div.home_center_left_tokenshop {
  box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.6);
  background-image: url('images/token_shop.png');
  background-size: 100% 100%;
  width: 100%;
  height: 10vh;
}

div.home_center_left_tokenshop:hover {
	box-shadow: none;
	opacity: 1.0;
	z-index: 100;
	transition: 0.5s;
}

div.home_center_right_games_icon_background {
	float: left;
	border-color: white;
	color: transparent;
	width: 33.33%;
	height:30vh;
	opacity: 0.7;
	/*transition: 0.5s;*/
}

div.home_center_left_login {
	color: black;
	width: 100%;
	height: 20vh;
}

div.header {
	text-align: center;
	height: 20%;
}
div.header_menu_left {
	float: left;
	width: 33.33%;
	color: transparent;
}
div.header_menu_center {
	float: left;
	width: 33.33%;
}
div.header_menu_right {
	float: right;
	width: 33.33%;
	color: transparent;
}


#login
{
  height: 35%;
  width: 15%;
  padding: 30px;
  top: 50%;
  left: 50%;
  z-index: 0;
}

div.account_settings_container {
padding: 10 %;
float: left;
width: 50%;
height: 82%;
background-image: url("images/scroll_background.jpg");
background-size: 100% 100%;
}

.avatar-image {
	border: 5px solid var(--font-color);
}

.avatar-image:hover {
	box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.6);
	opacity: 1.0;
	z-index: 100;
    transition: 0.5s;
	border: 5px solid var(--secondary-color);
}