*{
	box-sizing:border-box;
	font-family: 'Balsamiq Sans', cursive;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}
body{
	background:#0f1a15;
	margin:0px;
	height:100vh;
}
#game-border{
	background: URL("../img/back.png");
	background-size: 100% 100%;
	position: absolute;
	width:800px;
	height:600px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#keyboard{
	position:absolute;
	text-align:center;
	border:0px solid #000;
}
#keyboard div{
	display:inline-block;
	padding:0px;
	color:#fff;
	text-align:center;
	font-family: 'Balsamiq Sans', cursive;
}
.active{
	background: URL("../img/letter-active.png");
	background-size: 100%;
	background-repeat: no-repeat;
	cursor:pointer;
}
.passive{
	background: URL("../img/letter-passive.png");
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: default;
}
#word{
	display:inline-block;
	width:100%;
	border:0px solid #999;
	overflow:hidden;
	color:#fff;
	font-family: 'Balsamiq Sans', cursive;
	text-align:center;
}
#word div{
	display:inline-block;
	text-align:center;
}
#hangMan{
	height:100%;
}
#hangDiv{
	position:relative;
	float:left;
	background: URL("../img/0.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	border: 0px solid #333;
}
#effect{
	visibility:hidden;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:5vw;
	color:yellow;
}
#right{
	border: 0px solid #333;
}
#buttons div{
	font-family: 'Balsamiq Sans', cursive;
	color:#e9511c;
}
#button-reload{
	background: URL("../img/button-reload.svg");
	background-size: auto 100%;
	background-repeat: no-repeat;
	cursor:pointer;
}
#button-hint{
	background: URL("../img/button-hint-active.svg");
	background-size: auto 100%;
	background-repeat: no-repeat;
	cursor:pointer;
	position:relative;
}
#button-hint-animation{
    background: url(../img/button-video-active.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0%;
    width: 98%;
	overflow:hidden;
}
#watch{
    color: #cc2a33;
    text-align: center;
    position: absolute;
    width: 100%;
	font-family:tahoma;
    font-weight: bold;
	left:0;
	right:0;
}
#button-hint-bub{
    background: url(../img/button-bub-green.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: absolute;
    color: #fff!important;
	text-align:center;
	z-index:99;
    font-weight: bold;
}
#button-level{
	background: URL("../img/button-level.svg");
	background-size: auto 100%;
	background-repeat: no-repeat;
	text-align:center;
	font-weight:bold;
}
#score{
	position:relative;
}
#score-score{
	position:absolute;
	width:80%;
	color:#fff;
	background-color: rgba(0, 0, 0, 0.3);
	right:0;
}
#score-icon{
	position:absolute;
	left:0px;
}
#category{
	width:100%;
	text-align:center;
	color:#6db387;
}
#message{
	position: absolute;
	display:none;
	top: 35%;
	left: 30%;
	transform: translate(-50%, -50%);
	color:#eee;
	border:2px solid #1b3123;
	border-radius:2vh;
	background: #6db387;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	text-align:center;
	z-index:99;
}
#message-title{
	font-family: 'Balsamiq Sans', cursive;
	font-weight:bold;
	background:  #6db387;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#eee;
}
#message-message{
	margin:auto;
	width:90%;
	font-family: 'Balsamiq Sans', cursive;
	color: #2f4c30;
}
#message-score-div{
	position:relative;
	border:0px solid #000;
	overflow:hidden;
	margin:auto	
}
#message-score{
	position:absolute;
	width:75%;
	color:#fff;
	background-color: rgba(0, 0, 0, 0.3);
	right:0;
}
#message-score-icon{
	position:absolute;
	left:0px;
}
#message .ok{
	font-family: 'Balsamiq Sans', cursive;
	font-weight:bold;
	position: absolute;
    background: #f3d552;
    cursor: pointer;
    border: 1px solid #e7ac5b;
    color: #ca7024;
	box-shadow: rgb(0 0 0 / 60%) 0px 0px 4px 0px;
}
#message .cancel{
	font-family: 'Balsamiq Sans', cursive;
	font-weight:bold;
	position: absolute;
    background: #f3d552;
    cursor: pointer;
    border: 1px solid #e7ac5b;
    color: #ca7024;
	box-shadow: rgb(0 0 0 / 60%) 0px 0px 4px 0px;
}
#message .continue{
	display:none;
	font-family: 'Balsamiq Sans', cursive;
	font-weight:bold;
	position: absolute;
    background: #f3d552;
    cursor: pointer;
    border: 1px solid #e7ac5b;
    color: #ca7024;
	box-shadow: rgb(0 0 0 / 60%) 0px 0px 4px 0px;
}
/* Landscape */
@media (min-aspect-ratio: 1/1) {
	#right{
		float:right;
		width:55vh;
	}
	#word{
		font-size:6vh;
		margin-top:30vh;
	}
	#word div{
		width:6vh;
		height:7vh;
		line-height:7vh;
		margin:0 0.5vh;
		border-bottom:0.5vh solid #fff;
	}
	#category{
		font-size:3vh;
		margin-top:2vh;
	}
	#keyboard{
		bottom:1vh;
		width:80%;
		left:10%;
	}
	#keyboard div{
		width:7vh;
		height:9vh;
		line-height:9vh;
		margin:0.5vh;
		font-size:6vh;
	}
	#hangDiv{
		float:left;
		height:50vh;
		width:55vh;
		margin-left:10vh;
		margin-top:5vh;
	}
	#score{
		float:right;
		height:7vh;
		width:18vh;
		margin:1vh;
		text-align:center;
		line-height:7.2vh;
		font-size:4vh;
		border-radius:2vh;
	}
	#score-score{
		font-size:3.5vh;
		height:4.5vh;
		line-height:4.5vh;
		padding-left:2vh;
		top:1.5vh;
		border-radius:1.5vh;
		background-color:rgba(10, 33, 23, 0.8);
	}
	#score-icon{
		height:7vh;
	}
	#button-level{
		float:right;
		height:7vh;
		width:7vh;
		margin:1vh;
		line-height:7.2vh;
		font-size:2.5vh;
	}
	#button-hint{
		float:right;
		height:7vh;
		width:7vh;
		margin:1vh;		
	}
	#button-hint-bub{
		padding-right: .2vh;
		top: -.8vh;
		right: -1.3vh;
		line-height: 3vh;
		height: 3vh;
		width: 3vh;
		font-size: 2vh;
	}
	#watch{
		bottom: 0.6vh;
		font-size: 1.1vh;
	}
	#button-reload{
		float:right;
		height:7vh;
		width:7vh;
		margin:1vh;
	}
	#message{
		top: 35%;
		left: 30%;
		width:50vh;
		height:60vh;
		border:2px solid #fff;
		border-radius:5vh;
	}
	#message-icon{
		width:20vh;
	}
	#message-title{
		width:90%;
		height:6vh;
		line-height:5vh;
		font-size:6vh;
		text-shadow: 2px 2px 2px #0C1104;
		letter-spacing: 0.5vh;
		margin:2vh auto 1vh auto;
	}
	#message-message{
		font-size:3vh;
		line-height:4vh;
		margin:2vh auto;
	}
	#message-score-div{
		width:45%;
		height:8vh;
	}
	#message-score{
		font-size:3vh;
		height:4vh;
		line-height:4vh;
		top:2vh;
		border-radius:1.5vh;
	}
	#message-score-icon{
		height:8vh;
	}
	#message .ok{
		width:17vh;
		height:7vh;
		line-height:7vh;
		font-size:3.5vh;
		bottom:3vh;
		left:6vh;
		border-radius: 2.5vh;
	}
	#message .cancel{
		width:17vh;
		height:7vh;
		line-height:7vh;
		font-size:3.5vh;
		bottom:3vh;
		right:6vh;
		border-radius: 2.5vh;
	}
	#message .continue{
		width:26vh;
		height:7vh;
		line-height:7vh;
		font-size:3.5vh;
		bottom:3vh;
		left:12vh;
		border-radius: 2.5vh;
	}
}

/* Portrait */
@media (max-aspect-ratio: 1/1) {
	#right{
		width:100%;
	}
	#word{
		font-size:12vw;
		margin-top:10vw;
		width:100%;
	}
	#word div{
		width: 11vw;
		height: 12vw;
		line-height: 12vw;
		margin: 0 1vw;
		border-bottom: 1vw solid #fff;
	}
	#category{
		font-size:4vw;
		margin-top:1vw;
	}	
	#keyboard{
		bottom:3vw;
		width:92%;
		left:4%;
	}
	#keyboard div{
		width:7vw;
		height:9vw;
		line-height:9vw;
		margin:0.5vw;
		font-size:6vw;
	}
	#hangDiv{
		text-align:center;
		background-position: center;
		height:35vh;
		width:100%;
		margin-top:20vw;
	}
	#buttons{
		position:absolute;
		top:0;
		right:0;
		width:100%;
	}
	#score{
		float:right;
		height:12vw;
		width:30vw;
		margin:1.5vw;
		text-align:center;
		line-height:13vw;
		font-size:8vw;
		border-radius:2vw;
	}
	#score-score{
		font-size:5.5vw;
		height:8vw;
		line-height:8vw;
		padding-left:4vw;
		top:1.5vh;
		border-radius:1.5vw;
		background-color:rgba(10, 33, 23, 0.8);
	}
	#score-icon{
		height:12vw;
	}
	#button-level{
		line-height:13vw;
		font-size:4.5vw;
		float:right;
		height:12vw;
		width:12vw;
		margin:1.5vw;	
	}
	#button-hint{
		float:right;
		height:12vw;
		width:12vw;
		margin:1.5vw;
	}
	#button-hint-bub{
		padding-right: 0.5vw;
		top: -1vw;
		right: -2vw;
		line-height: 6vw;
		height: 6vw;
		width: 6vw;
		font-size: 4vw;
	}
	#watch{
		bottom: 1vw;
		font-size: 1.8vw;
	}
	#button-reload{
		float:right;
		height:12vw;
		width:12vw;
		margin:1.5vw;
	}		
	#message{
		top: 30%;
		left: 50%;
		width: 65vw;
		height: 85vw;
		border:1px solid #fff;
		border-radius:2vw;
	}
	#message-title{
		width:59vw;
		height:8vw;
		line-height:8vw;
		font-size:7vw;
		margin:1vw auto 2vw auto;
		text-shadow: 2px 2px 2px #0C1104;
		letter-spacing: 0.5vw;
	}
	#message-icon{
		width:40vw;
	}
	#message-message{
		font-size:4vw;
		line-height:4.2vw;
		margin:2vw auto;
	}
	#message-score-div{
		width:45%;
		height:10vw;
	}
	#message-score{
		font-size:4vw;
		height:5vw;
		line-height:5vw;
		top:2.5vw;
		border-radius:1.5vw;
	}
	#message-score-icon{
		height:10vw;
	}
	#message .ok{
		width:20vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		bottom:4vw;
		left:9vw;
		border-radius: 2vw;
	}
	#message .cancel{
		width:20vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		bottom:4vw;
		right:9vw;
		border-radius: 2vw;
	}
	#message .continue{
		width:30vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		bottom:4vw;
		margin:auto;
		left:18vw;
		border-radius: 2vw;
	}
}