*{
	box-sizing:border-box;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body{
	background: #441b0b;
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
}
#online{
	position:absolute;
	width:100%;
	height:100vh;
	display:none;
	top:0;
	left:0;
	border:0;
	overflow: hidden;
}
#game-border{
	border:0px solid #f00;
	position: absolute;
	width:800px;
	height:600px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#menu-1{
	border:0px solid #eee;
	font-size:0;
}
#menu-2{
	border:0px solid #eee;
	font-size:0;
}
#board-outer{
	position:relative;
	background:conic-gradient(#72371d 0 45deg, #602a14 0 135deg, #72371d 0 225deg, #602a14 0 315deg, #72371d 0 360deg);
	margin:auto;
	overflow:hidden;
	display:inline-block;
}
#board{
	position:relative;
	overflow:hidden;
	font-size:0;
	border:0px solid #d5a74b;
}
.box{
	position:absolute;
}
.dark{
	background: URL("../img/dark.png"),#843e0d;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.light{
	background: URL("../img/light.png"),#e2af56;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.stamp{
	position:absolute;
	border-radius:50%;
	padding:5%;
}
#stamp-eat{
	display:none;
	position:absolute;
	border-radius:50%;
}
.number{
	position:absolute;
	color:#b6643a;
	text-align:center;
	font-family: 'Arial';
}
.black{
	background: URL("../img/stamp-1.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.white{
	background: URL("../img/stamp-2.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.blackS{
	background: URL("../img/stamp-1a.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.whiteS{
	background: URL("../img/stamp-2a.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
#pop-message{
    position: absolute;
    display: block;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-family: poppins;
    text-align: center;
    z-index: 98;
	user-select: none;
	pointer-events: none;
}
.alert{
    background: #f6a7a3;
}
.info{
    background: #a8f1c6;
}
#settings{
	position: absolute;
	display:none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    background: #4f2819;
	text-align:center;
	z-index:98;
	color:#ffd3c2;
}
.settings-button{
	float: right;
	display: inline-block;
	cursor:pointer;
}
.active{
	background: URL("../img/settings-button-active.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;
	color: #064725;
}
.passive{
	background: URL("../img/settings-button-passive.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;
	color: #797979;
}
.settings-switch{
	float: right;
	display: inline-block;
	cursor:pointer;
}
.on{
    background: URL("../img/settings-switch-on.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    text-align: left;
	color: #064725;
}
.off{
    background: URL("../img/settings-switch-off.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    text-align: right;
    color: #797979;
}
#settings-close{
    background: URL("../img/settings-close.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    color: #797979;
    position: absolute;
	cursor:pointer;
}
#message{
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: radial-gradient(circle, rgba(142,72,36,1) 50%, rgba(96,42,20,1) 90%);
    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;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#ffbc00;
}
#message-message{
	margin:auto;
	width:90%;
	font-family: 'Bebas Neue', cursive;
}
#message .close{
	font-family: poppins;
	position: absolute;
	background: #8e4824;
	cursor:pointer;
    color: #ffd097;
}
#message .ok{
	display:inline-block;
	font-family: 'Bebas Neue', cursive;
	background: #74371b;
	cursor:pointer;
}
#message .cancel{
	display:inline-block;
	font-family: 'Bebas Neue', cursive;
	background: #74371b;
	cursor:pointer;
}

.user{
	font-size:0px;
	display:inline-block;
	background: URL("../img/user-border.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;
}
.user .img{
	position:relative;
	margin:auto;
	border:0px solid #333;
	border-radius:5%;
}
.user .user-name{
    background: URL("../img/user-name.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #dd7957;
}
#user1-img{
	background: URL("../img/user-1.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;	
}
#user2-img{
	background: URL("../img/user-computer.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;	
}
.time{
	background: URL("../img/time.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    width: 94%;
    text-align: center;
    color: #fff;
}

.box1{
	position:relative;
	background: #8e4824;
	display:inline-block;
}
#box1 div{
	display:none;
    position: absolute;
}
#box2 div{
	display:none;
    position: absolute;
}
.blackSide{
    background: URL("../img/stamp-2-side.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;	
}
.whiteSide{
    background: URL("../img/stamp-1-side.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;	
}
.box2{
    background: #333;
    display: inline-block;
	overflow-y: scroll;
}
#box3 span{
	display: block;
	font-family: poppins;
    color: #fff;
}
#box3::-webkit-scrollbar-track{
	background-color: #333;
}

#box3::-webkit-scrollbar{
	background-color: #F5F5F5;
}

#box3::-webkit-scrollbar-thumb{
	background-color: #000;
}

.button{
    background: URL("../img/button.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    color: #dd7957;
    cursor: pointer;
    text-align: left;
}
.b_new{
    background: URL("../img/button-new.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_settings{
    background: URL("../img/button-settings.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_online{
    background: URL("../img/button-online.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_online_active{
    background: URL("../img/button-online-active.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_type_single{
    background: URL("../img/button-type-single.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_type_duo{
    background: URL("../img/button-type-duo.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}
.b_type_online{
    background: URL("../img/button-type-online.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#start-screen{
	background: #000c;
	background: radial-gradient(circle, rgba(149,96,68,1) 0%, rgba(119,72,48,1) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#start-menu{
	font-family: 'Bebas Neue', cursive;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
#start-buttons{
    background: #88563c;
    margin: auto;
}
#start-1p{
    background: url(../img/start-1p.svg);	
}
#start-2p{
    background: url(../img/start-2p.svg);	
}
#start-online{
    background: url(../img/start-online.svg);	
}
#start-settings{
    background: url(../img/start-settings.svg);	
}
.start-buttons{
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #dd7957;
    text-align: left;
	cursor:pointer;
}

/* Landscape */
@media (min-aspect-ratio: 13/10) {
	#stamp-eat{
		padding:7vh;
	}
	.possible{
		box-shadow: inset 0 0 0.8vh 0.4vh #088a08;
	}
	.shadow{
	   -moz-box-shadow:		inset 0 0 1.5vh #fff;
	   -webkit-box-shadow:	inset 0 0 1.5vh #fff;
		box-shadow:			inset 0 0 1.5vh #fff;
	}
	#pop-message{
		box-shadow: 0 1vh 2vh #0008;
		padding: 1vh;
		border-radius: 0.4vh;
		font-size:2vh;
	}
	#settings{
		width:60vh;
		height:71vh;
		border-radius:1vh;
		box-shadow: 1vh 0 8vh rgb(0 0 0 / 35%);
	}
	#settings-header{
		font-size:5vh;
	}
	#settings .list{
		width: 96%;
		height: 8vh;
		border-radius: 0.5vh;
		background: #603d30;
		margin: 1vh auto;
		text-align:left;
	}
	#settings .list span{
		display: inline-block;
		margin-top: 2vh;
		margin-left: 1vh;
		font-size: 3vh;
		line-height: 2vh;
	}
	#settings .list em{
		display: inline-block;
		font-size: 1.2vh;
		font-family: 'Poppins', sans-serif;
		max-width: 42vh;
		font-style: normal;
		line-height: 1.2vh;
		margin-top: 1vh;
		color:#ffbda4;
	}
	.settings-button{
		width: 20%;
		height: 5vh;
		margin: 1.5vh 0;
		text-align: center;
		line-height: 5.1vh;
		font-size: 2.2vh;
	}
	.settings-switch{
		width: 12vh;
		height: 5vh;
		margin: 1.5vh 0;
		line-height: 5vh;
	}
	.on{
		padding-left: 3.3vh;
		padding-top: 0.1vh;
		font-size: 1.8vh;
	}
	.off{
		padding-right: 2.5vh;
		padding-top: 0.2vh;
		font-size: 1.8vh;
	}
	#settings-close{
		width: 5vh;
		height: 5vh;
		top: 1vh;
		right: 1vh;
	}
	.user{
		width:100%;
	}
	.user .img{
		width:14vh;
		height:14vh;		
	}
	.user .user-name{
		bottom: 0;
		font-size: 2vh;
		height: 3.5vh;
		line-height: 3.8vh;
	}
	#menu-1{
		width:15vh;
		height:100vh;
		float:left;
		text-align:center;
	}
	#menu-2{
		width:15vh;
		height:100vh;
		float:right;
		text-align:center;
	}
	.time{
		font-size: 2.5vh;
		height: 3.5vh;
		line-height: 3.8vh;
		margin:0.5vh auto;
	}
	.box1{
		border:1.5vh solid #602a14;
		width:90%;
		height:57vh;
		box-shadow: inset 0 0 2vh #651f00;
	}
	.box2{
		border: 1.5vh solid #602a14;
		width: 90%;
		height: 22vh;
		box-shadow: inset 0 0 2vh #222;
		margin-top:1vh;
	}
	#box3 span{
		font-size: 1.6vh;
		margin: 0.2vh;
	}
	#box3::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 0.6vh rgba(0,0,0,0.3);
	}
	#box3::-webkit-scrollbar{
		width: 0.6vh;
	}
	#box1 div{
		width: 90%;
		height: 9.5vh;
		margin: 0.5vh;
	}
	#box2 div{
		width: 90%;
		height: 9.5vh;
		margin: 0.5vh;
	}
	#message{
		width:60vh;
		height:30vh;
		box-shadow: inset 0 0 5vh #0004;
		border: 0.2vh solid #7a3607;
	}
	#message-title{
		line-height: 6vh;
		font-size: 5vh;
		margin: 1vh auto 1.5vh auto;
		text-shadow: 0.1vh 0.2vh 0 #0005;
	}
	#message-message{
		font-size:4.5vh;
		line-height:5vh;
	}
	#message .close{
		width: 4.5vh;
		height: 4.5vh;
		line-height: 4.5vh;
		font-size: 3.5vh;
		top: 1vh;
		right: 1vh;
		box-shadow: 0 0 3vh #00000038;
	}
	#message .ok{
		width: 18vh;
		height: 6vh;
		line-height: 6vh;
		font-size: 3vh;
		margin: 4vh 4vh 0 4vh;
		border:0.1vh solid #682e06;
		box-shadow: inset 0 -0.3vh 0 0 #ff8e02;
	}
	#message .cancel{
		width: 18vh;
		height: 6vh;
		line-height: 6vh;
		font-size: 3vh;
		margin: 4vh 4vh 0 4vh;
		border:0.1vh solid #6a2f08;
		box-shadow: inset 0 -0.3vh 0 0 #ff0202;
	}
	.button{
		height: 4.7vh;
		line-height: 5.1vh;
		margin: 1vh 0;
		font-size: 2.5vh;
		padding-left: 5.5vh;
	}
	#start-menu img{
		width: 41vh;
		height: 28.5vh;
	}
	#start-buttons{
		padding: 5vh;
		border-radius: 3vh;
		width: 43vh;
	}
	.start-buttons{
		width: 30.5vh;
		height: 8vh;
		line-height: 8vh;
		margin: 1vh auto;
		font-size: 3.5vh;
		padding-left: 12vh;
	}
}

/* Portrait */
@media (max-aspect-ratio: 13/10) {
	#stamp-eat{
		padding:7vw;
	}
	.possible{
		box-shadow: inset 0 0 0.8vw 0.4vw #088a08;
	}
	.shadow{
	   -moz-box-shadow:		inset 0 0 1.5vw #fff;
	   -webkit-box-shadow:	inset 0 0 1.5vw #fff;
		box-shadow:			inset 0 0 1.5vw #fff;
	}
	#pop-message{
		box-shadow: 0 1vw 2vw #0008;
		padding: 1vw;
		border-radius: 0.4vw;
		font-size:3vw;
	}
	#settings{
		width:60vw;
		height:71vw;
		border-radius:1vw;
		box-shadow: 1vw 0 8vw rgb(0 0 0 / 35%);
	}
	#settings-header{
		font-size:5vw;
	}
	#settings .list{
		width: 96%;
		height: 8vw;
		border-radius: 0.5vw;
		background: #603d30;
		margin: 1vw auto;
		text-align:left;
	}
	#settings .list span{
		display: inline-block;
		margin-top: 2vw;
		margin-left: 1vw;
		font-size: 3vw;
		line-height: 2vw;
	}
	#settings .list em{
		display: inline-block;
		font-size: 1.2vw;
		font-family: 'Poppins', sans-serif;
		max-width: 42vw;
		font-style: normal;
		line-height: 1.2vw;
		margin-top: 1vw;
		color:#ffbda4;
	}
	.settings-button{
		width: 20%;
		height: 5vw;
		margin: 1.5vw 0;
		text-align: center;
		line-height: 5.1vw;
		font-size: 2.2vw;
	}
	.settings-switch{
		width: 12vw;
		height: 5vw;
		margin: 1.5vw 0;
		line-height: 5vw;
	}
	.on{
		padding-left: 3.3vw;
		padding-top: 0.1vw;
		font-size: 1.8vw;
	}
	.off{
		padding-right: 2.5vw;
		padding-top: 0.2vw;
		font-size: 1.8vw;
	}
	#settings-close{
		width: 5vw;
		height: 5vw;
		top: 1vw;
		right: 1vw;
	}
	.user{
		width: 15vw;
		position: absolute;
	}
	.user .img{
		width:14vw;
		height:14vw;		
	}
	.user .user-name{
		bottom: 0;
		font-size: 2vw;
		height: 3.5vw;
		line-height: 3.8vw;
	}
	.user1{
		left: 0;
	}
	.user2{
		transform: rotate(180deg);
		top: 3.75vw;
		right: 0;
	}
	#menu-1{
		position:relative;
		width:100vw;
		height:17vw;
		text-align:left;	
	}
	#menu-2{
		position:relative;
		width:100vw;
		height:17vw;
		text-align:left;
	}
	.time{
		font-size: 2.5vw;
		height: 3vw;
		line-height: 3.3vw;
		margin:0.5vw auto;
	}
	#time1{
		width: 14%;
		position: absolute;
		top: 13.5vw;
		left: 0.5vw;
	}
	#time2{
		width: 14%;
		position: absolute;
		top: 0;
		right: 0.5vw;
		transform: rotate(180deg);
	}

	#box1{
		border: 0.5vw solid #602a14;
		width: 50%;
		height: 10vw;
		box-shadow: inset 0 0 3vw #651f00;
		/* float: right; */
		/* margin: 7vw 0 0 1vw; */
		position: absolute;
		left: 16vw;
		top: 7vw;
	}
	#box2{
		border: 0.5vw solid #602a14;
		width: 60%;
		height: 10vw;
		box-shadow: inset 0 0 3vw #651f00;
		/* float: left; */
		/* margin: 7vw 0 0 1vw; */
		position: absolute;
		left: 24vw;
	}
	#box3{
		border: 0.5vw solid #602a14;
		width: 22%;
		height: 10vw;
		box-shadow: inset 0 0 3vw #222;
		/* float: left; */
		/* margin-top: 7vw; */
		margin-left: 1vw;
		/* transform: rotate(180deg); */
	}
	#box3 span{
		font-size: 1.6vw;
		margin: 0.2vw;
		text-align:center;
	}
	#box3::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 0.6vw rgba(0,0,0,0.3);
	}
	#box3::-webkit-scrollbar{
		width: 0.6vw;
	}
	#box1 div{
		width: 8vw;
		height: 8vw;
		margin: 0.5vw;
	}
	#box2 div{
		width: 8vw;
		height: 8vw;
		margin: 0.5vw;
	}
	#message{
		width:60vw;
		height:28.8vw;
		box-shadow: inset 0 0 5vw #0004;
		border: 0.2vw solid #7a3607;
	}
	#message-title{
		line-height: 6vw;
		font-size: 5vw;
		margin: 1vw auto 1.5vw auto;
		text-shadow: 0.1vw 0.2vw 0 #0005;
	}
	#message-message{
		font-size:4.5vw;
		line-height:5vw;
	}
	#message .close{
		width: 4.5vw;
		height: 4.5vw;
		line-height: 4.5vw;
		font-size: 3.5vw;
		top: 1vw;
		right: 1vw;
		box-shadow: 0 0 3vw #00000038;
	}
	#message .ok{
		width: 18vw;
		height: 6vw;
		line-height: 6vw;
		font-size: 3vw;
		margin: 2.8vw 4vw 0 4vw;
		border:0.1vw solid #682e06;
		box-shadow: inset 0 -0.3vw 0 0 #ff8e02;
	}
	#message .cancel{
		width: 18vw;
		height: 6vw;
		line-height: 6vw;
		font-size: 3vw;
		margin: 2.8vw 4vw 0 4vw;
		border:0.1vw solid #6a2f08;
		box-shadow: inset 0 -0.3vw 0 0 #ff0202;
	}
	.button{
		width: 15.5vw;
		height: 4.5vw;
		line-height: 4.5vw;
		margin: 0.5vw 0.5vw;
		font-size: 2vw;
		padding-left: 6vw;
		float: left;
	}
	#buttons-div{
		padding-top: 6.5vw;
		padding-left: 0.5vw;
		overflow: hidden;
		width: 34vw;
		display: inline-block;
		float:right;
	}
	#start-menu img{
		width: 73vw;
		height: 51vw;
	}
	#start-buttons{
		padding: 10vw;
		border-radius: 5vw;
		width: 80vw;
	}
	.start-buttons{
		width: 55vw;
		height: 14.2vw;
		line-height: 14.2vw;
		margin: 1vw auto;
		font-size: 6vw;
		padding-left: 17vw;
	}
}