* {
	padding:0;
	margin:0;
	font-family:sans-serif;
}

body {
	background-color:#333;
}

#welcome-screen {
	width:100vw;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}

#welcome-screen-main {
	width:max(80vw, 350px);
	height:max(50vh, 350px);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:25px;
	color:#dfdfdf;
}

#play-button {
	width:120px;
	height:120px;
	cursor:pointer;
	background:#2a7;
	color:#dfdfdf;
	font-size:28px;
	border:solid #dfdfdf 2px;
	border-radius:50%;
	transition:background .5s;
	animation:expand-outlie 2s linear infinite normal;
}

#play-button:hover {
	background:#196;
}

#new-game-button {
	border:none;
	background:#2a7;
	padding:8px;
	display:none;
	border-radius:20px;
	padding:10px;
	color:#333;
}

@keyframes expand-outlie {
	from { outline:solid #888 5px; }
	to { outline:solid #555 15px; }
}

a {
	background-color:#555;
	text-decoration:none;
	padding:10px;
	color:#2a7;
	border-radius:20px;
}

#app {
	width:100vw;
	height:100vh;
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:relative;
}

#board {
	width:min(99vw, 80vh);
	height:min(99vw, 80vh);
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
	flex-flow:wrap;
}

.evenBoxV, .evenBoxH {
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-flow:wrap;
}

.evenBoxV {
	width:27%;
	height:36%;
	flex-direction:column;
}

.evenBoxH {
	width:36%;
	height:27%;
	flex-direction:row;
}

.oddBox {
	width:26%;
	height:26%;
	color:#fff;
	border:solid #f8f8f8 min(5vw, 4vh);
	display:flex;
	align-items:center;
	justify-content:space-around;
	gap:50%;
	flex-wrap:wrap;
}

.centerBox {
	width:26.2%;
	height:26.2%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	background-color:#3b4b68;
	border:solid #333 .4%;
}

.stepH, .stepV {
	background-color:#e2ecbc;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

.stepH {
	width:32.5%;
	height:16%;
}

.stepV {
	width:16%;
	height:32.5%;
}

.winBoxH, .winBoxV {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

.winBoxH {
	height:22.9%;
	width:54.1%;
	flex-direction:row;
	border-left:solid #3b4b68 min(6vw, 5vh);
	border-right:solid #3b4b68 min(6vw, 5vh);
}

.winBoxV {
	width:22.9%;
	height:54.1%;
	flex-direction:column;
}

#pointer {
	width:30.5%;
	height:30.5%;
	border:solid #ddd 1px;
	animation:rotation 5s linear infinite normal;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:30%;
	color:#fff;
	font-weight:bold;
}

@keyframes rotation {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

.controlBar {
	width:min(98vw, 80vh);
	height:9vh;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}

.diceHolder {
	width:min(8vh, 80px);
	height:min(8vh, 80px);
	border:solid #ddd min(2px, 1vh);
	background-color:#3b4b68;
	color:#ddd;
	font-weight:bold;
	border-radius:5px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.piece {
	width:min(1.5vw, 1.5vh);
	height:min(1.5vw, 1.5vh);
	border:solid #000 min(.6vw, .6vh);
	outline:solid #fff min(.8vw, .8vh);
	border-radius:50% 50% 50% 20%;
}

#pause-button {
	position:absolute;
	top:10px;
	right:10px;
	width:40px;
	height:auto;
	background:#2a7;
	border-radius:50%;
	
}