body {
    font-family: sans-serif;
    background-color: #222222;
    color: #ffffff;
}
.topbox {
    display: flex;
    flex-wrap: wrap;
    font-size: 32pt;
}

.dbox {
    display: flex;
    flex-wrap: wrap;
    font-size: 24pt;
}

.dbutton {
    padding: 10px;
    margin: 10px;
    border-style: solid;
    border-radius: 8px;
    border-width: 3px;
}

.rollbutton {
    font-size: 32pt;
    padding: 10px;
    margin: 10px;
    max-width: fit-content;
    border-style: solid;
    border-radius: 8px;
    border-width: 3px;
    background-color: #999999;
    color: #ffffff;
    border-color: #555555;
}

.traydie {
    margin: 8px;
    padding: 3px;
    border-style: solid;
    border-radius: 8px;
    border-width: 3px;
}

.d4 {
    background-color: #cc9900;
    color: #ffff00;
    border-color: #996600;
}

.d6 {
    background-color: #0066cc;
    border-color: #003399;
    color: #0099ff;
}

.d8 {
    background-color: #009933;
    border-color: #006600;
    color: #00ff00;
}

.d10 {
    background-color: #6600ff;
    border-color: #6600cc;
    color: #9966ff;
}

.d10s {
    background-color: #cc3399;
    border-color: #990099;
    color: #ff99cc;
}

.d12 {
    background-color: #cc0000;
    border-color: #800000;
    color: #ff5050;
}

.d20 {
    background-color: #ff3300;
    border-color: #993300;
    color: #ff9933;
}