html, body {background: #fff; color: #111; font: normal 16px/1.2 Arial;}
.hidden {display: none;}
.container {max-width: 800px; margin: 0 auto; padding: 30px 10px; box-sizing: border-box;}
a {color: #1a5fdc;}
h1 {font-size: 45px; margin: 0 0 15px; text-align: center;}
h2 {font-size: 22px; margin: 0 0 35px; text-align: center;}

.option-row {margin: 25px 0;}
.option-row p {font-size: 16px; margin: 0 0 10px;}
.option-row select {font-size: 14px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; width: 250px; max-width: 100%;}

.graph {float: right; margin-left: 25px;}
button {font-size: 20px; padding: 10px 20px; width: 200px; background: #fcad09; color: #fff; border: none; border-radius: 5px; cursor: pointer; vertical-align: middle;}
button.run {background: #1a5fdc; margin-left: 25px;}
.chart {display: inline-block;}
.spouse-chart {display: none;}
.spouse-chart.active {display: inline-block;}

.roll-container {margin: 20px 0;}
.rc-caption {font-weight: bold;}
.rc-item {}
.rc-item.yhbrs span {color: #1aa709; font-weight: bold;}
.rc-item.yhbrs span.cn {color: #fff; margin: 5px 0 10px; display: block; background: #3187e0; padding: 10px;   border-radius: 5px; width: max-content;}
.rc-items {display: none; margin: 15px 0;}
.clear-result {margin-left: 25px; cursor: pointer; vertical-align: middle; text-decoration: underline;}
footer {margin: 100px 0 0px; font-size: 13px;}
footer a {margin-left: 15px;}
.datas {margin: 20px 0; display: none;}
.datas table {width: 100%;}
.datas table td {width: 20%; text-align: center; padding: 10px; border: 1px solid #e1e1e1;}
.datas table tr:first-child td {background: #fafafa; font-weight: bold;}
.datas table td:first-child {width: 40%; text-align: left;}
	.datas table td.y {background: #ffffe7;}
	.datas table td.g {background: #efffe7;}
	.datas table td.r {background: #ffe7e7;}
	
	
@media screen and (max-width: 980px) {
	h1 {text-align: center; font-size: 25px;}
	.graph {float: none; margin: 0; text-align: center;}
	button {display: block; margin: 10px auto !important;}
	.clear-result {display: block; text-align: center; margin: 0;}
	footer a {display: block; margin: 10px 0;}
}