body {
	background-color: #5a375d;
	user-select: none;
	overflow: hidden;
}

#menu {
	width: 700px;
	height: 700px;
	background-color: #5a375d;
	border: 10px solid white;
	font-family: 'Bungee Shade', monospace;
	color: white;
	font-size: 40px;
	line-height: 90px;
	position: absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	z-index: 100;
	animation: texty 1s;
}

@keyframes texty {
	0% {color: #EC9D2B;transform: translate(-60px, 0px);opacity: 0.8}
}

button {
	background-color: #2e2e33;
	border: 5px solid white;
	font-size: 40px;
	color: white;
	cursor: pointer;
	font-family: monospace;
	animation: dropIn 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

button:hover {
	transform: scale(1.05);
}

button:active {
	transform: scale(1.03);
}

@keyframes dropIn {
	0% {transform: translate(0px, -20px); opacity: 0; border-color: #EC9D2B;}
	100% {opacity: 1;}
}

#win {
	cursor: pointer;
	width: 300px;
	height: 40px;
	background-color: #5a375d;
	font-family: monospace;
	color: white;
	border: 5px solid white;
	font-size: 30px;
	padding: 20px 0;
	position: absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 150px;
}

#win:hover {
	transform: scale(1.1);
}

canvas {
	background-color: #d88c30;
	width: 640px;
	height: 400px;
	border: 10px solid #ed9e2b;
	animation: arrive 0.5s;
}

#dice_board {
	width: 640px;
	height: 240px;
	background-color: #37373d;
	border: 10px solid #2e2e33;
	font-family: monospace;
	color: white;
	animation: arrive 1s;
}

@keyframes arrive {
	0% {transform: translate(20px, 0px);}
}

#dice {
	width: 64px;
	height: 64px;
	background-image: url("dice/dice_1.png");
	background-size: 64px;
	margin-bottom: 3px;
	margin-right: 3px;
	animation: roll_in 2s;
}

@keyframes roll_in {
	0% {transform: translate(200px, 0px) rotate(720deg);}
}

.arrow {
	width: 32px;
	height: 32px;
	border: solid white;
	border-width: 0 20px 20px 0;
	display: inline-block;
	padding: 3px;
	position: absolute;
}

.arrow:hover {
	opacity: 0.5;
	cursor: pointer;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 280px;
  margin-top: 90px;
}

.upright {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	margin-left: 280px;
  	margin-top: -10px;
}

.rightdown {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	margin-left: 280px;
  	margin-top: 200px;
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-left: -340px;
  margin-top: 90px;
}

.downleft {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	margin-left: -340px;
  	margin-top: 200px;
}

.leftup {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	margin-left: -340px;
  	margin-top: -10px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-left: -30px;
  margin-top: -10px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-left: -30px;
  margin-top: 200px;
}

#dice:hover {
	opacity: 0.9;
	cursor: grab;
}

#dice:active {
	opacity: 0.8;
	filter: drop-shadow(0px 0px 10px #2e2e33);
}

#images {
	display: none;
}