@font-face {
   font-family: lcd;
   src: url(LiquidCrystal-Bold.otf);
}

@font-face {
   font-family: minnie;
   src: url(Minnie.ttf);
}

/*******************************************/
/* Schema                                  */
/*******************************************/

body {
	overflow			: hidden;
}

.container {
	width				: 98vmin;
	max-width			: 1200px;
	max-height			: 1200px;
	display				: inline-block;
	position			: relative;
	overflow			: hidden;
}

.base {
	text-align			: left;
}

.box {
	display				: table;
	width				: 98%;
	height				: 100%;
	text-align			: center
}

.row {
	position			: relative;
	display				: table-row;
}

.inside {
	background-color	: ivory;
}

/* Colori bordi */

.idle {
	background-color	: gainsboro;
	z-index				: 0;
}

.box_border {
	background-color	: navy;
	z-index				: 1;
}

.player_1 {
	background-color	: forestgreen;
	z-index				: 1;
}

.player_2 {
	background-color	: red;
	z-index				: 1;
}

.evidenzia {
	background-color	: gold;
	z-index				: 1;
}

/* Bordi */

.top {
	height 				: 2px;
	position			: absolute;
	top					: 0px;
	left				: -2px;
	right				: 0px;
}	
	
.bottom {
	height 				: 2px;
	position			: absolute;
	bottom				: 0px;
	left				: -2px;
	right				: 0px;
}

.left {
	width				: 2px;
	position			: absolute;
	left				: 0px;
	top					: 0px;
	bottom				: 0px;
}

.right {
	width				: 2px;
	position			: absolute;
	right				: 0px;
	top					: 0px;
	bottom				: 0px;
}

.mark_off {
	display				: none;
}

.mark_on {
	width				: 50%;
	margin-top			: 29%;
	margin-left			: -5%;
}

/*******************************************/
/* Pannello                                */
/*******************************************/

.wait {
	position			: absolute;
	top					: 40vmin;
	left				: 40vmin;
}

.img_wait {
	width				: 20vmin;
}

.lcd {
	font-family			: lcd;
}

.game_over_panel {
	position			: absolute;
	top					: 24vmin;
	left				: 24vmin;
	height				: 50vmin;
	width				: 50vmin;
	z-index				: 10;
    background-color	: lightskyblue;
    box-shadow			: 10px 10px 5px grey;
    border-radius		: 20px;
}

.div_image_game_over {
	width				: 100%;
}

.image_game_over {
    width: 20vmin;
    left: 50%;
    position: relative;
    margin-left: -10vmin;
}

.off {
	display				: none;
}

.game_over_title {
	width				: 100%;
	text-align			: center;
	font-family			: lcd;
	height				: 10vmin;
	font-size			: 6vmin;
    margin-top			: 4vmin;
    margin-bottom		: -4vmin;
    color				: midnightblue;
    text-shadow			: 2px 2px lightgrey;
}

.game_over_message {
	width				: 100%;
	text-align			: center;
	font-family			: minnie;
	color				: midnightblue;
	font-size			: 5vmin;
}

.game_over_retry_icon {
	position			: absolute;
	left				: 25%;
	width				: 10vmin;
	margin-left			: -5vmin;
}

.game_over_share_icon {
	position			: absolute;
	left				: 50%;
	width				: 10vmin;
	margin-left			: -5vmin;
}

.game_over_home_icon {
	position			: absolute;
	left				: 75%;
	width				: 10vmin;
	margin-left			: -5vmin;
}

@media all and (orientation:portrait) { 
  /* Styles for Portrait screen -> Verticale*/
  
  .container {
    height				: 100vmin;
  }
  
  .panel {
  	position			: absolute;
  	right				: 8px;
  	top					: 104vmin;
  	height				: 20vmin;
  	left				: 8px;
  	background-color	: black;
  }

  .xp_player  {
 	display				: inline-block;
	width				: 40%;
	text-align			: left; 
  }
  
  .points_player  {
 	display				: inline-block;
	width				: 20%;
	text-align			: left; 
  }  
  
  .points_opponent  {
 	display				: block;
 	position			: absolute;
 	left				: 55%;
 	top					: 0px;
	text-align			: left; 	
	font-size			: 8vmin;
  	color				: orange;
  }
  
  .xp_display {
 	display				: inline-block;
	width				: 100%;
	text-align			: left; 
	margin-left         : 8px;	
	font-size			: 8vmin;
  	color				: orange;
  	margin-bottom		: 20px;
  }
  
  .point_display {
 	display				: block;
 	position			: absolute;
 	left				: 33%;
 	top					: 9vmin;
	width				: 33%;
	text-align			: left; 	
	font-size			: 8vmin;
  	color				: orange;
  }

  .xp {
	margin-left			: 6px;
	width				: 12vmin;
	margin-bottom		: -3vmin;
	left				: 0px;
	display				: block;
  } 
  
  .menu_icon_1 {
	margin				: 2vmin 0 1vmin -3px;
	width				: 6vmin;
	position			: absolute;
	left				: 33%;
	top					: 0px;
	display				: block;
  }
  
  .menu_icon_2 {
	margin				: 2vmin 0 1vmin -3px;
	width				: 6vmin;
	position			: absolute;
	left				: 0px;
	top					: 0px;
	display				: block;
  }
  
  .home_icon {
    position			: absolute;
    top					: 0px;
    right				: 10px;
  }
  
  .img_home {
  	width				: 14vmin;
  	margin-top			: 2vmin;
  	margin-right		: 4px;
  }

  .adsense {
	position			: absolute;
	height				: 49vmin;
	top					: 21vmin;
	left				: 0px;
	right				: 0px;
	background-color	: white;
	padding				: 2px;
	border				: 1px solid black;
	overflow			: hidden;
  }
}

@media all and (orientation:landscape) {
  /* Styles for Landscape screen */
  
  .container {
    height				: 98vmin;
  }
  
  .adsense {
	  position			: absolute;
	  bottom			: 2px;
	  left				: 2px;
	  right				: 2px;
	  height			: 50px;
	  background-color	: white;
	  text-align		: center;
	  padding			: 2px;
	  overflow			: hidden;
  }
  
  .panel {
  	position			: absolute;
  	right				: 6px;
  	top					: 9px;
  	bottom				: 4px;
  	left				: 100vmin;
  	background-color	: black;
  }
  
  .xp_display {
 	display				: inline-block;
	width				: 100%;
	text-align			: center; 	
	font-size			: 8vmin;
  	color				: orange;
  	margin-bottom		: 20px;
  }
  
  .point_display {
 	display				: inline-block;
	width				: 100%;
	text-align			: center; 	
	font-size			: 9vmin;
  	color				: orange;
  }
  
  .xp {
	margin-left			: -7vmin;
	width				: 14vmin;
	margin-bottom		: -3vmin;
	position			: relative;
	left				: 50%;
	display				: block;
  } 

  .menu_icon_1 {
	margin-left			: -4vmin;
	width				: 8vmin;
	position			: relative;
	left				: 50%;
	display				: block;
  }
  
  .menu_icon_2 {
	margin-left			: -4vmin;
	width				: 8vmin;
	position			: relative;
	left				: 50%;
	display				: block;
  }
  
  .home_icon {
    position			: absolute;
    bottom				: 16vmin;
    left				: 50%;
    margin-left			: -7vmin;

  }
  
  .img_home {
	width				: 14vmin;
	position			: relative;
	display				: block;
	margin-top			: 10px;
  }
}