@font-face {
    font-family: 'dungeonregular';
    src: url('dungrg-webfont.woff2') format('woff2'),
         url('dungrg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
    background:#000;
    color:#fff;
	margin:0;
	padding:0;
	#width:100%;
	#height:100%;
	#overflow:hidden;
}

body {
    font-family:"dungeonregular", serif;
    #font-size:320%;
    font-size:8vh;
	text-align:center;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
	user-select:none;
}
::selection {
	background:rgba(0,0,0,0);
}
::-moz-selection {
	background:rgba(0,0,0,0);
}

.msg {
	#margin-top:1%;
	margin-top:1vh;
	#height: 20%;
	height: 20vh;
	line-height:1;
	#font-size: 75%;
	font-size: 6vh;
}

.result {
	display:flex;
	justify-content: center;
	align-items: center;
	#height: 25%;
	height: 25vh;
	max-width: 40vh;
	margin:auto;
	line-height: 0.8;
}

.roll {
	#height:20%;
	width:20vh;
	height:20vh;
	background:url('d10.png') no-repeat center;
	background-size:contain;
	margin:auto;
	#margin-bottom:2%;
	margin-bottom:3vh;
}
.button.disabled {
	opacity:.75;
}
.dice, .target{
	#font-size: 50%;
	font-size: 4vh;
}
.label {
	display:inline-block;
	#font-size: 200%;
	font-size: 8vh;
	#width:20%;
	width:8vh;
}
.minus, .plus {
	display:inline-block;
	#min-width:25px;
	width:5vh;
	#min-height:25px;
	height:5vh;
	background:url('minus.png') no-repeat center;
	background-size:contain;
	position:relative;
	top:-1vh;
}
.minus {
	#left: -10%;
	left: -5vh;
}
.plus {
	background-image:url('plus.png');
	#left: 10%;
	left: 5vh;
}
.success {
	color: #9f0;
}
.failure {
	color: #f03;
}