html,body {
	margin: 0;
	background-color: #111;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#CONTAINER {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70%;
}

#CONTAINER_2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 20%;
}

#CONTAINER_3 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 10%;
	font-size: 2vh;
	font-family: monospace;
	color: #333;
}

#BOARD {
	background-color: #121212;
	width: 90%;
	height: 90%;
	border: 1px solid white;
	border-radius: 1vh;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("BACK.png");
	background-size: 3vh;
	animation: wiggle 3s infinite, slide 20s infinite linear;
}

@keyframes slide {
	50% {background-position: 100px 100px}
}

@keyframes wiggle {
	0% {transform: rotate(-0.5deg);}
	50% {transform: rotate(0.5deg);}
	100% {transform: rotate(-0.5deg);}
}

#DICE_BAR {
	background-color: #222;
	width: 90%;
	height: 90%;
	border: 1px solid white;
	border-radius: 1vh;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-image: url("BACK_2.png");
	background-size: 3vh;
	animation: slide 20s infinite linear;
}

.DICE {
	transition: transform 0.25s, filter 0.2s;
	width: 7vh;
	height: 7vh;
	background-repeat: no-repeat;
	filter: drop-shadow(-0.3vh 0.3vh 0 rgba(0,0,0,0.5));
	margin: 1vw;
	cursor: pointer;
	font-size: 4vh;
	font-family: monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.2px; 
	top: 0;
	left: 0;
	user-select: none;
}

.BUTTON {
	width: 5vh;
	height: 5vh;
	accent-color: #111;
}

.GROUNDED:hover {
	transition: transform 0.5s, filter 0.2s;
	transform: scale(0.95) rotate(10deg);
}

.GROUNDED:active {
	transition: transform 0.5s, filter 0.2s;
	transform: scale(1.1) rotate(-30deg);
	filter: drop-shadow(-1vh 1vh 0 rgba(0,0,0,0.25));
}

.DROPPED {
	transition: left 0.2s 0.1s, top 0.25s 0.11s;
	animation: Rolled 0.2s;
}

@keyframes Rolled {
	0% {transform: rotate(720deg) scale(1.3) translate(-1vw, 1vw); font-size: 0;}
	25% {transform: rotate(-120deg) scale(0.8) translate(1vw, 1vw); font-size: 0;}
	50% {transform: rotate(80deg) scale(1.2) translate(-1vw, -1vw); font-size: 0;}
	75% {transform: rotate(-20deg) scale(0.95) translate(1vw, -1vw); font-size: 0;}
}

#D100 {
	background-image: url("d100.png");
	background-size: contain;
}

#D20 {
	background-image: url("d20.png");
	background-size: contain;
}

#D10 {
	background-image: url("d10.png");
	background-size: contain;
}

#D8 {
	background-image: url("d8.png");
	background-size: contain;
}

#D6 {
	background-image: url("d6.png");
	background-size: contain;
}

#D4 {
	background-image: url("d4.png");
	background-size: contain;
}

#D3 {
	background-image: url("d3.png");
	background-size: contain;
}