button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
/* END NORMILIZE CSS */

/* Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    font-weight:normal;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* END Reset CSS */

body {
    background-color: #fff9e5;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
strong {
    font-weight: bold;
}
strong.botchdie {
    color: #f00;
}
#container {
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    border: 2px solid #a32fa3;
    font-size: 1.5rem;
}
h1 {
    background-color: #800080;
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    padding: 0.5rem 10px;
}
h2 {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 1rem 10px 5px 10px;
    color: #800080;
}
h3, h4 {
    font-size: 1.2rem;
    text-align: center;
    color: #800080;
}
h4 {
    font-size: 0.9rem;
}
.topCase label,
#extendBox label,
#rolltype label {
    font-size: 1rem;
}
#rolltype {
    margin: .25rem 0 0 0;
}
#rolltype input[type="radio"] {
    margin-left: 2rem;
}
input[type="button"] {
    border: 2px solid #a32fa3;
    background-color: #FFC300;
    color: #800080;
    font-weight: bold;
    margin: 0.5rem 0.25rem;
}
.butnHold input[type="button"] {
    color: #333;
    background-color: #fff;
    border: 2px solid #333;
    padding: .4rem;
    font-weight: bold;
    font-size: 1.5rem;
    width: 2.5rem;
    border-radius: 8px;
}
.butnHold {
    display: flex;
    justify-content: space-between;
    width: 8rem;
    margin: auto;
}
#extendBox {
    display: none;
}
#diffBox,
#optionBox,
#rerollBox,
#rollBox,
#extendBox,
.fourplex {
    background-color: #eee;
    border: 2px solid #a32fa3;
    border-radius: 5px;
}
.topCase {
    display: flex;
    margin: 0 5px;
}
#diffBox {
    padding: 0 0.5em;
    flex: 0 0 auto;
    width: calc(50% - 64px);
    margin: 0.8rem 5px 0 5px;
}
#diffBox > div {
    text-align: center;
}
#optionBox,
#rerollBox {
    padding: 0 0.5em;
    flex: 0 0 auto;
    width: calc(25% - 25px);
    margin: 0.8rem 5px 0 5px;
}
#optionBox p,
#rerollBox p {
    margin: 0.5em 0;
}
#optionBox input,
#rerollBox input,
#rolltype input {
    vertical-align: bottom;
}
.twoplexCase {
    display: flex;
}
.twoplex {
    flex: 0 0 auto;
    width: calc(50%);
    text-align: center;
}
.fourplexCase {
    display: flex;
    margin: 0 5px;
}
.fourplex {
    flex: 0 0 auto;
    width: calc(25% - 14px);
    margin: 0.8rem 5px 0 5px;
    text-align: center;
    height: 5rem;
}
.fourplex h3 {
    margin-bottom: 0.5rem;
}
.fourplex span {
    font-size: 2rem;
    font-weight: bold;
}
.fourplex #diceDisp {
    font-size: 0.6875rem;
    font-weight: normal;
    display: block;
    margin: 0 0.5em;
}
#rollBox,
#extendBox {
    margin: 0.8rem 10px 0 10px;
    padding: 0 0.5em 0.5em 0.5em;
}
#rollBox input,
#rollBox select {
    font-size: 1.2rem;
    margin-right: 1rem;
}
.dieRoll,
.extendBut {
    width: 2.3em;
    padding-top: 2px;
    padding-bottom: 2px;
}
#rollMany {
    padding: 2px 3px;
}
#lotDice {
    padding-top: 2px;
    padding-bottom: 2px;
}
#resultMsg {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 1rem 0 0 0;
}
.selHolder {
    display: inline-block;
}
table {
    width: 100%;
    font-size: .75rem;
}
table th {
    font-weight: bold;
    vertical-align: bottom;
    border-bottom: 1px solid #000;
    color: #800080;
}
table tbody tr:first-child td {
    padding: 1em 0 0.125rem 0;
}
table td {
    text-align: center;
    padding: 0.125rem 0;
}
tr:nth-child(even) {
    background-color: #eee;
}
.brand {
    background: #800080;
    max-width: 50rem;
    padding: .5rem 0;
    margin: 1rem auto 0 auto;
    border-left: 2px solid #800080;
    border-right: 2px solid #800080;
    color: #fff;
    font-size: 1.3rem;
}
.brand span {
    padding: 0 0 0 1rem;
}
.brand a {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
}
/* MEDIA QUERIES */
@media (min-width: 1000px) {
    #container {
        max-width: 50rem;
        font-size: 0.6875em;
    }
    h2 {
        font-size: 1.2rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    #diffBox {
        width: calc(50% - 25px);
    }
    input[type="button"] {
        margin: 0.5rem 0;
    }
    table {
        font-size: 1rem;
    }
    #optionBox input,
    #rerollBox input,
    #rolltype input {
        vertical-align: baseline;
    }
}