*{
	box-sizing:border-box;
	user-select: none;
}
body{
	overflow:hidden;
 	background-image: url('../img/back.png'),radial-gradient(#221717,#221717);
	background-repeat: no-repeat;
	background-position: center;
	background-size:100% auto;
	margin:0px;
	width:100vw;
	height:100vh;
}
.disk{
	display:none;
	position:absolute;
	top:0;
	left:0;
	height:20px;
	width:100px;
	z-index:99;
	transition: all 0s;
	border-radius:2.5vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size:100% auto ;
}
#disk-1{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #e02429,#ff5054,#e02429);
	border:2px solid #800001;	
}
#disk-2{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #3fa2c6,#68c5e7,#3fa2c6);
	border:2px solid #095777;	
}
#disk-3{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #c73fa6,#e767c7,#c73fa6);
	border:2px solid #77095b;	
}
#disk-4{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #c7963f,#e7b967,#c7963f);
	border:2px solid #775109;	
}
#disk-5{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #63c73f,#88e767,#63c73f);
	border:2px solid #247709;	
}
#disk-6{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #828282,#a6a6a6,#828282);
	border:2px solid #404040;		
}
#disk-7{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #de2794,#fc50b5,#de2794);
	border:2px solid #80004a;	
}
#disk-8{
	background-image:url("../img/hanoi-back.png"), linear-gradient(to right, #1c52e9,#4d7bff,#1c52e9);
	border:2px solid #001f80;	
}
#game-border{
	border:0px solid #666;
	position: absolute;
	width:80vw;
	height:50vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
.area{
	display:inline-block;
	width:30%;
	height:90%;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:100% auto ;
}
#board{
	display:block;
	background-image:url("../img/bottom.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:100% auto ;
	border:0px solid #f00;
}
.tower{
	display:inline-block;
	width:18%;
	height:99%;
	background-image:url("../img/stick.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:auto 100%;
	pointer-events: none;
}

#hamle-div{
	background-color: rgba(0, 0, 0, 0.6);;
	position:absolute;
	bottom:0px;
	width:100%;
	height:10vh;
	font-size:5vh;
	line-height:10vh;
	font-family: 'Bebas Neue', cursive;
	color:#ddd;
}
#menu{
	top:0px;
	width:100%;
	height:10vh;
	padding:5px;
	font-family: 'Bebas Neue', cursive;
	color:#ddd;
}
#button-new{
	background-image:url("../img/button-new.png");
	cursor:pointer;
}
#button-back{
	background-image:url("../img/button-back.png");
	cursor:pointer;
}
#button-solve{
	background-image:url("../img/button-solve.png");
	cursor:pointer;
}
#button-disc{
	background-image:url("../img/button-disc.png");
	cursor:pointer;
}
.button{
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:100% auto ;
	display:inline-block;
}
#discC{
	margin-left:10%;
}
#disc-sec{
	position:absolute;
	display:none;
	width:15%;
}
#disc-sec div{
	cursor:pointer;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size:100% auto;
	margin:auto;
}
#disc-sec-3{
	background-image:url("../img/disc-sec-3.png");
}
#disc-sec-4{
	background-image:url("../img/disc-sec-4.png");
}
#disc-sec-5{
	background-image:url("../img/disc-sec-5.png");
}
#disc-sec-6{
	background-image:url("../img/disc-sec-6.png");
}
#disc-sec-7{
	background-image:url("../img/disc-sec-7.png");
}
#message{
	position: absolute;
	display:none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#452005;
	border:2px solid #7a3607;
	border-radius:0.5vw;
	background: URL("../img/message-back.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	text-align:center;
	z-index:99;
}
#message-title{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
}
#message-message{
	margin:auto;
	width:90%;
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
}
#message .close{
	font-family: 'Bebas Neue', cursive;
	position: absolute;
	background: URL("../img/message-close.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
}
#message .ok{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	position: absolute;
	background: #e0fe06;
	cursor:pointer;
	border:2px solid #7a3607;
	border-radius:0.5vw;
}
#message .cancel{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	position: absolute;
	background: #ff7007;
	cursor:pointer;
	border:2px solid #7a3607;
	border-radius:0.5vw;
}

/* Portrait */
@media (max-aspect-ratio: 1/1) {
	#message{
		width:60vw;
		height:28.8vw;
	}
	#message-title{
		width:14vw;
		height:4vw;
		line-height:4vw;
		font-size:4vw;
		margin:1vw auto 2vw auto;
	}
	#message-message{
		font-size:4vw;
		line-height:4.2vw;
	}
	#message .close{
		width:5vw;
		height:5vw;
		top:1vw;
		right:1vw;
	}
	#message .ok{
		width:14vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		bottom:2vw;
		left:9vw;
	}
	#message .cancel{
		width:14vw;
		height:7vw;
		line-height:7vw;
		font-size:4vw;
		bottom:2vw;
		right:9vw;
	}
}
/* Landscape */
@media (min-aspect-ratio: 1/1) {
	#message{
		width:30vw;
		height:14.4vw;
	}
	#message-title{
		width:7vw;
		height:2vw;
		line-height:2vw;
		font-size:2vw;
		margin:0.5vw auto 1vw auto;
	}
	#message-message{
		font-size:2vw;
		line-height:2.7vw;
	}
	#message .close{
		width:2.5vw;
		height:2.5vw;
		top:0.5vw;
		right:0.5vw;
	}
	#message .ok{
		width:7vw;
		height:3.5vw;
		line-height:3.5vw;
		font-size:2vw;
		bottom:1vw;
		left:4.5vw;
	}
	#message .cancel{
		width:7vw;
		height:3.5vw;
		line-height:3.5vw;
		font-size:2vw;
		bottom:1vw;
		right:4.5vw;
	}
}