/* Reset */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, form, label, legend, footer {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

*, ::after, ::before {
    box-sizing: border-box;
}

label {
    display: inline-block;
}


button, input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Page format and layout */
body {
    background-image: url("bg.png");
    background-repeat: repeat;
    padding: 2rem 1rem;
    font-size: 1rem;
    color: #000;
    line-height: 1.5;
    font-family: 'Space Grotesk', sans-serif;
}

h1 {
    font-family: 'Turret Road', sans-serif;
    font-weight: 800;
    text-align: center;
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-family: 'Turret Road', sans-serif;
    font-weight: 700;
    text-align: center;
    font-size: 1.75rem;
}

h3 {
    font-family: 'Turret Road', sans-serif;
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
}

a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
}

a:visited {
    color: inherit;
}

a:active {
    color: inherit;
    text-decoration-style: solid;
}

a:hover {
    color: inherit;
    text-decoration-style: solid;
}

.capsule-container {
    background-color: white;
    border: 1px solid black;
    border-radius: 1rem;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

.content-container {
    width: 100%;
    padding: 1rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.border-bottom {
    border-bottom: 1px solid black;
}

.border-top {
    border-top: 1px solid black;
}

.horizontal-padding {
    padding-left: 1rem;
    padding-right: 1rem;
}

.vertical-padding {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Noscript Row */
#noscript-banner {
    background-color: red;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    padding: 1rem;
}

/* Player Number Row */
#player-number-reset {
    visibility: hidden;
    position: relative;
    font-size: 0.75rem
}

#player-number-reset > * {
    position: absolute;
    top: 0;
    right: 1rem;
}

.player-number-cap {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
}

.player-number-cap > img {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0.5rem;
}

.player-number-button {
    margin: 0;
    padding: 0;
    position: absolute;
    clip: rect(0px, 0px, 0px, 0px);
    /*noinspection CssInvalidPropertyValue*/
    clip-path: rect(0px, 0px, 0px, 0px);
    pointer-events: none;
}

.player-number-button-label {
    margin: 0;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    color: #AAA;
    border-color: #CCC;
    background-color: #EEE;
    border-width: 1px;
    font-size: 1.25rem;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    padding: 0.75rem;
    height: 100%;
}

.player-number-button:disabled + .player-number-button-label {
    background-color: #EEE;
}

.player-number-button-2 + .player-number-button-label {
    background-color: #FFB3FF;
}

.player-number-button-2:disabled:checked + .player-number-button-label {
    background-color: #FF00FF;
    color: white;
}

.player-number-button-3 + .player-number-button-label {
    background-color: #DCBBF6;
}

.player-number-button-3:disabled:checked + .player-number-button-label {
    background-color: #A857E9;
    color: white;
}

.player-number-button-4 + .player-number-button-label {
    background-color: #B7DCFA;
}

.player-number-button-4:disabled:checked + .player-number-button-label {
    background-color: #53ACF4;
    color: white;
}

.player-number-button-5 + .player-number-button-label {
    background-color: #B3FEFF;
}

.player-number-button-5:disabled:checked + .player-number-button-label {
    background-color: #02FDFF;
    color: white;
}

.button-row-left {
    border-style: solid;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.button-row-middle {
    border-style: solid;
}

.button-row-right {
    border-style: solid;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

#player-number-flavor {
    padding: 0 1rem;
    text-align: center;
}

/* Roll Buttons */
#dice-number {
    width: 5rem;
    text-align: center;
    font-size: 1.25rem;
    padding: 0.25rem;
    height: 100%;
    margin-top: 0.5rem;
}

.dice-number-button {
    font-size: 1.25rem;
    text-align: center;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    height: 100%;
    margin-top: 0.5rem;
}


.roll-button {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 1rem;
    font-weight: bold;
    padding: 0.5rem;
}

/* Dice Row */
#dice-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: normal;
    width: 100%;
    min-height: 5rem;
}

.die {
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    vertical-align: middle;
    line-height: 4rem;
    border: 1px solid black;
    font-size: 2rem;
    user-select: none;
    border-radius: 1rem;
}

.die-lasers {
    background-color: #02FDFF;
}

.die-feelings {
    background-color: #FF00FF;
}

.die-fail {
    color: #AAA;
    border-color: #CCC;
    background-color: #EEE;
}

.die-sparkle {
    display: block;
    position: absolute;
    width: 17px;
    height: 25px;
    margin-left: -9px;
    margin-top: -13px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAZCAYAAADXPsWXAAAFFWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDEtMzBUMTk6MDU6MTAtMDgwMCIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDEtMzBUMTk6MDY6MTQtMDg6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDEtMzBUMTk6MDY6MTQtMDg6MDAiCiAgIHBob3Rvc2hvcDpEYXRlQ3JlYXRlZD0iMjAyNC0wMS0zMFQxOTowNToxMC0wODAwIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIxNyIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjI1IgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTciCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjI1IgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI5Ni8xIgogICB0aWZmOllSZXNvbHV0aW9uPSI5Ni8xIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0icHJvZHVjZWQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFmZmluaXR5IERlc2lnbmVyIDIgMi4yLjAiCiAgICAgIHN0RXZ0OndoZW49IjIwMjQtMDEtMzBUMTk6MDY6MTQtMDg6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PoZfpXYAAAGAaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRzytEURTHPwbN5EejWFgoLyELI0ZNbCxm8quwGE/5tZl55oeaH6/33qTJVtkqSmz8WvAXsFXWShEpWVsTG/Sc56mRzLndcz/3e8853XsueNSMljWreiGbs4zoaFiZnZtXvE9U0Ar46Ipppj45PaJS1t5uJVrsOuDUKh/3r9UuJUwNKnzCQ5puWMJjwhMrlu7wlnCTlo4tCZ8IdxtyQeEbR4+7/ORwyuUPhw01GgFPg7CS+sXxX6yljaywvJz2bKag/dzHeUldIjczLWubzBZMoowSRmGcYSKE6GNQfIgAQXpkR5n83u/8KfKSq4nXKWKwTIo0Ft2iFqR6Qtak6AkZGYpO///21Uz2B93qdWGofrTtlw7wbsLnhm2/H9j25yFUPsB5rpSf34eBV9E3Slr7HvjX4PSipMW34Wwdmu/1mBH7liplepJJeD6G+jlovIKaBbdnP+cc3YG6Kl91CTu70Cnx/sUvSHNn2D2iFEIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAEnSURBVDiNvZSxSgNBEIa/iYoY7MR+LSz0HaxstNNOEAt7sbUdYmUd30AIqZLSRivfQQuDbh/sJKIkroV75rjc7iaH+sOy9zOz383MHStE5KyuAFfAkRh9CeXVYhBg16+dWFIKslHYK0E2C/vfQSQUcFYXgYF/0Qioi9GPWStZz8XnvC9VDFJsIdhSDLKV8D+amImzWgcOgEtgKRd6A06AthgdTECc1QVgGzgE9oDlSIWvQBdoATdidCjO6jFwAaxGDobUB87EWX0C1ioAMj3XgHNPrKI+0MhmMs94JvukZ9Lheya3YnT4e1+nTM5q0x/K1BSjp2W5sZ/tLuGngtwn/FSQR+DTP4+8nw0iRt+Bnre90DWQqgTGLQRb+TfIQ2GvBLnOraC+AIbhT+6bUHUtAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 2;
    color: transparent;
    -moz-opacity: 0.0;
    opacity: 0.0;
    animation: glitter 2s linear 0s infinite normal;
    -webkit-animation: glitter 2s linear 0s infinite normal;
    -moz-animation: glitter 2s linear 0s infinite normal;
    /*noinspection CssUnknownProperty*/
    -ms-animation: glitter 2s linear 0s infinite normal;
    -o-animation: glitter 2s linear 0s infinite normal;
}

@-webkit-keyframes glitter {
    0% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

#result-text-container {
    text-align: center;
    font-weight: bold;
}

/* Footer */
footer {
    margin: 0;
    padding: 0;
    display: block;
    color: #555;
    font-size: 0.75rem;
}