*{
	box-sizing:border-box;
}
body{
	margin:0;
	background-color:#2f2f9e;
	font-family: 'Poppins';
	color:#fff;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#game-border{
	border:0 solid #fff;
}
#game-area{
	position:relative;
}
#question-area{
	width:96%;
}
#level{
	position:absolute;
	background: #d64933;
	text-align:center;
	cursor:pointer;
	z-index:99;
}
#select{
	font-weight:bold;
}
#level span{
	display:block;
}
.select-down{
    background: url("../img/level-down.png");
    background-size: auto 50%;
    background-repeat: no-repeat;
}
.select-up{
    background: url("../img/level-up.png");
    background-size: auto 50%;
    background-repeat: no-repeat;
}
.header{
	background-color: #34445e;
    font-weight: bold;
    color: #fff;
}
.question{
	cursor:pointer;
	padding-left: 1vh;
}
.questionLine{
	text-decoration: line-through;
	color:#b9cb68 !important;
}
.questionSel{
	color:#fff !important;
	background:#d64933;
}
#buttons{
	font-size:0;
	background-color: #fff;
	text-align:center;
}
#buttons div{
	background: #34445e;
	display:inline-block;
	cursor:pointer;
}
#buttons div:nth-child(1) {
	box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.4vh 0 #9a4133;
	background: URL("../img/button-new.png") #d64933;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
#buttons div:nth-child(2) {
	box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.4vh 0 #302774;
	background: URL("../img/button-print.png") #52489c;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
#buttons div:nth-child(3) {
	box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.4vh 0 #367849;
	background: URL("../img/button-hint.png") #5da271;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
#buttons div:nth-child(4) {
	box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.4vh 0 #3b4364;
	background: URL("../img/button-arrow-LR.png") #5d6ba2;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}

#choose{
	visibility:hidden;
	position: absolute;
	opacity: 0;
	transition: all 0.5s;
	z-index:98;
	color:#2f2f9e;
	font-weight:bold;
	overflow:hidden;
	height:0;
}
#choose div:hover{
	color:#f00;
}
#choose span{
	display:block;
	font-weight:normal;
}
#choose p{
	margin:0;
}
#choose .selected{
    background: url('../img/select.png');
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: 12% 45%;
}
#choose div:nth-child(odd) {
	background-color:#fff;
	width:100%;
	text-align:center;
	cursor:pointer;
}
#choose div:nth-child(even) {
	background-color:#ededed;
	width:100%;
	text-align:center;
	cursor:pointer;
}
.piece{
	caret-color: transparent;
	cursor: none;
	box-sizing:border-box;
	position: absolute;
	display:inline-block;
	background-color:#fff;
	width:100px;
	height:100px;
	font-size:25px;
	font-weight:bold;
	color:#333;
	margin:0;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.5s, color 0.5s;
}
.piece div{
	pointer-events: none;
}
.pieceSelect{
	background:rgb(213, 255, 255);
}
.pieceRight{
	color:#5da271;
}
.pieceWrong{
	color:#f00;
}

.numberUD{
	display:none;
	/*background: URL("../img/arrowUD.png");*/
	background-repeat: no-repeat;
	position:absolute;
	text-shadow: 0 0 #000;
	background-size: 1.3vh;
	background-position: 0 1.2vh;
	left:5%;
	top:10%;
	height:50%;
	width:20%;
	line-height:25%;
	font-size:25%;
	color:#000;
}
.numberUD img{
	height: 65%;
	position: absolute;
	top: 35%;
	left: -30%;
}

.numberLR{
	display:none;
	/*background: URL("../img/arrowLR.png");*/
	background-repeat: no-repeat;
	position:absolute;
	text-align:left;
	text-shadow: 0 0 #000;
	background-size: 1.2vh;
	background-position: 1.2vh;;
	left:10%;
	bottom:0;
	width:50%;
	height:18%;
	text-align:left;
	line-height:25%;
	font-size:25%;
	color:#000;
}
.numberLR img{
	width: 70%;
	position: absolute;
	bottom: -15%;
	left:50%;
}
#keyboard{
	display:none;
	z-index:99;
}
.display{
	display:inline-block;
}
#game{
	display:block;
	width:100vw;
}

#game-div{
	position:relative;
	border:0 solid #333;
}

#messageBack{
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgb(47,47,158,0.9);
	z-index:98;
}
#messageBack img{
	display:none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#message-box{
	visibility:hidden;
	background:#fff;
	position: absolute;
	text-align:center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 0s;
	z-index:99;
}
#close{
	position:absolute;
	font-weight:bold;
	text-align:center;
	border:0px solid #fff;
	padding:0;
	background-color:#b36e00;
	cursor:pointer;
}
#title{
    color: #f00;
    font-weight: bold;
}
#body{
	color:#111;
}
#footer{
}
#button-new{
	display:inline-block;
	background:#333949;
	cursor:pointer;
}
#button-yes{
	display:inline-block;
	background:#00b313;
	cursor:pointer;
}
#button-no{
	display:inline-block;
	background:#b30f00;
	cursor:pointer;
}
#intro{
	background: URL("../img/logo.png") #333;
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
	z-index:99;
	position:absolute;
	left:0px;
	top:0px;
	margin:0px;
	right:0px;
	width: 100%;
	height: 100%;
	text-align:center;
	font-size:22px;
	font-weight:bold;
	color:#fff;
    display: flex;
    justify-content: center;
    height: 100vh;
	animation: fadeOut ease-in 2s;
	animation-fill-mode: forwards;
}
@keyframes fadeOut{
  0% {
    opacity:1;
  }
  100% {
    opacity:0.2;
	visibility:hidden;
  }
}

@media print {
	.piece{
		border:1px solid #000;
		box-shadow: 1px 1px 1px #000 !important;
		/*zoom:150%;*/
	}
	#word-area{
		color:#000;
	}
	#level{
		display:none;
	}
	#buttons{
		display:none;		
	}
	#game-area{
		margin-top:0 !important;
		float:none !important;
	}
	.questionSel{
		color: #000 !important;
	}
	#question-area{
		max-height:none !important;
		overflow: visible !important;
		font-size:14px !important;
		line-height:16px !important;
		border:solid 1px #000;
		box-shadow:0px 0px 0px #000 !important;
		color:#000 !important;
		margin:0 !important;
		padding:5px !important;
	}
	.header{
		color:#000;		
	}
	#keyboard{
		display:none;
	}
}

/* Landscape */
@media (min-aspect-ratio: 1/1){
	.full{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}
	#game{
		overflow:hidden;
		height:100vh;
	}
	#game-border{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#game-area{
		float:right;
		margin-top:4vh;
		margin-right:2vh;
		position:relative;
		display:inline-block;
		text-align:center;
	}
	.piece{
		text-shadow: 0.1vh 0.1vh 0 #777;
		box-shadow: 0.3vh 0.5vh 0.3vh #060650;
		border-radius:0.5vh;
	}
	#word-area{
		width:38vh;
		margin-top:2vh;
		position:relative;
		float:left;
	}
	#question-area{
		font-size: 2vh;
		line-height: 2.7vh;
		color:#3a3972;
		border-radius:2vh;
		padding:3vh 1vh 2vh 1vh;
		margin:6vh auto 0 auto;
		box-shadow: 0 1vh 5vh #361271;
		max-height: 79vh;
		overflow: auto;
		background-color:#fff;
	}
	#Q-LR{
		background-color:#fff;
		width:auto;
		border-radius:0;
		padding-bottom:0;
		margin:0;
	}
	#Q-UD{
		background-color:#fff;
		width:auto;
		border-radius:0;
		padding-bottom:0;
		margin:0
	}
	#level{
		top:0;
		padding:1vh;
		width:100%;
		border-radius:2vh;
		box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.3vh 0 #9a4133;
	}
	#select{
		font-size:3vh;
		line-height:3.5vh;
		text-shadow: 0 0.2vh #9a4133;
	}
	#level span{
		font-size:1.5vh;
		line-height:3.5vh;	
	}
	.select-down{
		background-position: 26vh;
	}
	.select-up{

		background-position: 26vh;
	}
	.header{
		margin: 1vh 0;
		border-radius: 1vh;
		padding: 1vh 2vh;
	}
	#buttons{
		position:absolute;
		padding:1vh;
		width:96%;
		margin:1vh 0.7vh;
		border-radius:2vh;
	}
	#buttons div{
		width: 7.7vh;
		height: 7.7vh;
		border-radius: 1.5vh;
		margin: 0 0.4vh;
		font-size: 1.5vh;
		line-height: 12vh;
	}
	#buttons div:nth-child(1) {
		background-position: center 1vh;		
	}
	#buttons div:nth-child(2) {
		background-position: center 1vh;		
	}
	#buttons div:nth-child(3) {
		background-position: center 1vh;		
	}
	#buttons div:nth-child(4) {
		background-position: center 1vh;		
	}
	#choose{
		top:9vh;
		left:0;
		width:36vh;
		font-size:4vh;
		line-height:5vh;
		border-radius:1vh;
		box-shadow: 0 1vh 5vh #361271;
		margin: 0 1vh;
	}
	#choose span{
		font-size:2vh;
		line-height:3vh;
	}
	#choose div:nth-child(1) {
		padding:4vh !important;
		height:14vh !important;
	}
	#choose div:nth-child(odd) {
		padding:2vh;
		height:12vh;
	}
	#choose div:nth-child(even) {
		padding:2vh;
		height:12vh;
	}
	#messageBack img{
		width:20vh;
	}
	#message-box{
		width:55vh;
		height:30vh;
		font-size:2.8vh;
		line-height:4.5vh;
		padding:1vh;
		border:1px solid #000;
		border-radius: 1vh;
		box-shadow: 2vh 2vh 4vh 0 rgba(0,0,0,0.75);
	}
	#close{
		width:5vh;
		height:5vh;
		line-height:5vh;
		font-size:3vh;
		right:1vh;
		top:1vh;
		border-radius: 1vh;
	}
	#title{
		font-size: 5vh;
		line-height:9vh;
	}
	#body{
		height:12vh;
	}
	#button-new{
		width:30vh;
		height:5vh;
		line-height:5vh;
		padding:0px 2vh;
		margin:0 1vh;
		border-radius: 1vh;
	}
	#button-yes{
		width:20vh;
		height:5vh;
		line-height:5vh;
		padding:0px 2vh;
		margin:0 1vh;
		border-radius: 1vh;
	}
	#button-no{
		width:20vh;
		height:5vh;
		line-height:5vh;
		padding:0px 2vh;
		margin:0 1vh;
		border-radius: 1vh;
	}
	#keyboard{
		display:none;
		position:absolute;
		width:100vw;
		height:43vh;
		padding:9vh 2vw 2vh 2vw;
		background:#0f0f52;
		bottom:0;
		text-align:center;
		font-size:5vh;
		line-height:9.5vh;
	}
	#keyboard div{
		width:8.2vw;
		height:9vh;
		display:inline-block;
		margin: 0.8vh 0.1vw;
		color:#fff;
		background:#3e3eac;
		text-align:center;
		border-radius:1vh;
	}
	#keyboard div:active{
		color:#fff;
		background:#202068;
	}
	#keyboardArea{
		position:absolute;
		top:0;
		left:0;
		width:100% !important;
		background:#202068 !important;
		height:8vh !important;
		line-height:8.2vh !important;
		font-size:4vh;
		margin: 0.1vh !important;
	}
	#keyboardArea img{
		height: 60%;
		vertical-align: middle;
		margin-right: 2vh;
		border: solid 1px #fff;
		padding: 0.6vh;
		border-radius: 1vh;
	}
	#keyboardClose{
		position: absolute;
		top: -8vh;
		right: 0;
		background: URL("../img/close.png") #0f0f52 !important;
		background-repeat: no-repeat !important;
		background-position: 0.7vh !important;
		background-size: auto 45% !important;
		width: 16vh !important;
		height: 7vh !important;
		line-height: 7vh !important;
		font-size: 3vh;
		margin: 0.5vh !important;
		padding-left: 2.5vh;
		border-radius: 1vh;
	}
	#harf-Right{
		position:absolute;
		top:0;
		right:0;
		background: URL("../img/tab-right.png") #3e3eac !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size:60% !important;
		width:7vh !important;
		height:7vh !important;
		line-height:7vh !important;
		font-size:5vh;
		margin: 0.5vh !important;
		border-radius:1vh;	
	}
	#harf-Left{
		position:absolute;
		top:0;
		left:0;
		background: URL("../img/tab-left.png") #3e3eac !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size:60% !important;
		width:7vh !important;
		height:7vh !important;
		line-height:7vh !important;
		font-size:5vh;
		margin: 0.5vh !important;
		border-radius:1vh;	
	}
	#keyboard div:nth-child(11) {
		margin-left:4.2vw;
	}
	#keyboard div:nth-child(19) {
		margin-right:4.2vw;
	}
	#keyboard div:nth-child(20) {
		margin-left:2vw;
	}
	#harf-backSpace{
		background: URL("../img/backSpace.png") #3e3eac !important;
		background-size: 5vh !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		width:12vw !important;
	}
}
/* Portrait */
@media (max-aspect-ratio: 1/1){
	.full{
	}
	#game{
		overflow:auto;
		height: 100vh;
	}
	#game-border{
		height: auto;
	}
	#game-area{
		margin: 16vw auto 3vw auto;		
	}
	#word-area{
		width:100%;
		margin:auto;
	}
	.piece{
		text-shadow: 0.1vw 0.1vw 0 #777;
		box-shadow: 0.3vw 0.5vw 0.3vw #060650;
		border-radius:0.5vw;
	}
	#question-area{
		display:flex;
		font-size: 3vw;
		line-height: 3.5vw;
		color:#3a3972;
		border-radius:2vw;
		margin:0 auto;
		box-shadow: 0 1vw 5vw #361271;
		overflow:auto;
	}
	#Q-LR{
		background-color:#fff;
		width:49%;
		border-radius: 2vw;
		padding-bottom:2vw;
		margin: 0 1vw;
	}
	#Q-UD{
		background-color:#fff;
		width:49%;
		border-radius: 2vw;
		padding-bottom:2vw;
		margin: 0 1vw;
	}
	.header{
		margin: 1vw 1vw;
		border-radius: 1vw;
		padding: 1vw 2vw;
	}
	#level{
		top:2vw;
		left:4vw;
		z-index:99;
		padding:1vw;
		width:40vw;
		border-radius:2vw;
		box-shadow: 0 0.2vh 0.5vh #361271, inset 0 -0.3vh 0 #9a4133;
	}
	#select{
		font-size:4vw;
		line-height:4.5vw;
		text-shadow: 0 0.2vw #9a4133;
	}
	#level span{
		font-size:2vw;
		line-height:3.5vw;	
	}
	.select-down{
		background-position: 30vw;
	}
	.select-up{
		background-position: 30vw;
	}
	#buttons{
		position: absolute;
		top: 1vw;
		padding:1vw;
		right:2vw;
		left:2vw;
		width:96vw;
		border-radius:2vw;
	}
	#buttons div{
		float:right;
		width:11vw;
		height:10vw;
		border-radius:2vw;
		margin:0 1vw;
		font-size: 2vw;
		line-height: 16vw;
	}
	#buttons div:nth-child(1) {
		background-position: center 1vw;		
	}
	#buttons div:nth-child(2) {
		background-position: center 1vw;		
	}
	#buttons div:nth-child(3) {
		background-position: center 1vw;		
	}
	#buttons div:nth-child(4) {
		background-position: center 1vw;		
	}
	#choose{
		top:10vw;
		left:4vw;
		font-size:4vw;
		width:38vw;
		line-height:5vw;
		border-radius:1vw;
		box-shadow: 0 1vh 5vw #361271;
		margin: 0 1vw;
	}
	#choose span{
		font-size:2vw;
		line-height:3vw;
	}
	#choose div:nth-child(1) {
		padding:4vw !important;
		height:14vw !important;
	}
	#choose div:nth-child(odd) {
		padding:2vw;
		height:12vw;
	}
	#choose div:nth-child(even) {
		padding:2vw;
		height:12vw;
	}
	#messageBack img{
		width:20vw;
	}
	#keyboard{
		display:none;
		position:fixed;
		width:100vw;
		height:43vw;
		padding:9vw 2vw 2vw 2vw;
		background:#0f0f52;
		bottom:0;
		text-align:center;
		font-size:5vw;
		line-height:9.5vw;
	}
	#keyboard div{
		width:7.68vw;
		height:9vw;
		display:inline-block;
		margin: 0.8vw 0.1vw;
		color:#fff;
		background:#3e3eac;
		text-align:center;
		border-radius:1vw;
	}
	#keyboard div:active{
		color:#fff;
		background:#202068;
	}
	#keyboardArea{
		position:absolute;
		top:0;
		left:0;
		width:100% !important;
		background:#202068 !important;
		height:8vw !important;
		line-height:8.2vw !important;
		font-size:4vw;
		margin: 0.1vw !important;
	}
	#keyboardArea img{
		height: 60%;
		vertical-align: middle;
		margin-right: 2vw;
		border: solid 1px #fff;
		padding: 0.6vw;
		border-radius: 1vw;
	}
	#keyboardClose{
		position: absolute;
		top: -8vw;
		right: 0;
		background: URL("../img/close.png") #0f0f52 !important;
		background-repeat: no-repeat !important;
		background-position: 0.7vh !important;
		background-size: auto 45% !important;
		width: 16vw !important;
		height: 7vw !important;
		line-height: 7vw !important;
		font-size: 3vw;
		margin: 0.5vw !important;
		padding-left: 2.5vh;
		border-radius: 1vw;
	}
	#harf-Right{
		position:absolute;
		top:0;
		right:0;
		background: URL("../img/tab-right.png") #3e3eac !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size:60% !important;
		width:7vw !important;
		height:7vw !important;
		line-height:7vw !important;
		font-size:5vw;
		margin: 0.5vw !important;
		border-radius:1vw;	
	}
	#harf-Left{
		position:absolute;
		top:0;
		left:0;
		background: URL("../img/tab-left.png") #3e3eac !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size:60% !important;
		width:7vw !important;
		height:7vw !important;
		line-height:7vw !important;
		font-size:5vw;
		margin: 0.5vw !important;
		border-radius:1vw;	
	}
	#keyboard div:nth-child(11) {
		margin-left:4vw;
	}
	#keyboard div:nth-child(19) {
		margin-right:4vw;
	}
	#harf-backSpace{
		background: URL("../img/backSpace.png") #3e3eac !important;
		background-size: 25% !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		width:22vw !important;
	}
	#message-box{
		width:70vw;
		height:40vw;
		font-size:4vw;
		line-height:5vw;
		padding:1vw;
		border:1px solid #000;
		border-radius: 1vw;
		box-shadow: 2vw 2vw 4vw 0 rgba(0,0,0,0.75);
	}
	#close{
		width:7vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		right:1vw;
		top:1vw;
		border-radius: 1vw;
	}
	#title{
		font-size: 6vw;
		line-height:11vw;
	}
	#body{
		height:14vw;
	}
	#button-new{
		width:45vw;
		height:10vw;
		line-height:10vw;
		padding:0px 2vw;
		margin:0 1vw;
		border-radius: 1vw;
	}
	#button-yes{
		width:30vw;
		height:10vw;
		line-height:10vw;
		padding:0px 2vw;
		margin:0 1vw;
		border-radius: 1vw;
	}
	#button-no{
		width:30vw;
		height:10vw;
		line-height:10vw;
		padding:0px 2vw;
		margin:0 1vw;
		border-radius: 1vw;
	}
	#keyboard-space{
		height:43vw;
	}
}