body { font-family: 'Arial', sans-serif; }
form { margin: 0; padding: 0; }
input[type="button"], input[type="submit"], button { color: #000;  border: 1px solid #000; box-shadow: 1px 1px 4px rgb(99, 99, 99); border-radius: 4px; }
input[type="button"]:active, input[type="submit"]:active, button:active { position: relative; left: 2px; top: 2px; box-shadow: 0px 0px 1px rgb(99, 99, 99); }
input[type="text"], input[type="number"] { text-align: center; }

table.scorecard { width: 100%; border-collapse: collapse; margin: 0.5em 0 0 0; }

table tr { height: 48px; }
table td { border: 1px solid #000; padding: 0; padding: 0.5em; }
table td.score { width: 33%; text-align: center; font-weight: bold; font-size: 1.25em; cursor: pointer; }
table td.label { font-weight: 600; }
table td.label .text { float: left; padding: 4px 0; }
table td.buttons { display: none; }
table td.buttons input[type="number"] { width: 50%; padding: 0.25em; }
table td.buttons input[type="submit"] { padding: 0.25em; }
table td.buttons button { margin: 0; padding: 0.25em 0.5em; min-width: 36px; cursor: pointer; }

.additional-yahtzee { display: none; }
.bonus-message { font-weight: bold; border-radius: 6px; padding: 2px 4px; }
.bonus-remaining { display: inline; float: right; padding: 4px 6px; }
.clear-button { float: right; display: none; padding: 4px 8px; cursor: pointer; }
.menu { margin: 1em 0; text-align: center; }
.total-score, .final-score { font-weight: bold; font-size: 1.25em; }
.final-score .total-container { float: left; width: 60%; text-align: right; }
.final-score .turn-counter { font-size: 0.75em; margin-top: 0.25em; font-weight: normal; float: right; text-align: right; }
select.theme-picker { width: 40%; margin-right: 2em; border: 1px solid #000; border-radius: 4px; padding: 4px; }

/* THEME: DEFAULT */

.theme.default { background-color: rgb(214, 214, 214); }
.theme.default input[type="button"], .theme.default input[type="submit"], .theme.default button { background-color: rgb(214, 214, 214); }
.theme.default table.scorecard { background-color: #FFF; }
.theme.default table td { border: 1px solid #000; }
.theme.default table td.score { color: #000; }
.theme.default table td.label { background-color: #646464; color: #FFF; text-shadow: 1px 1px 0 #000; }
.theme.default table td.buttons button { border: 1px solid #000; }
.theme.default table td.summary-score { background-color: #000; color: #FFF; }
.theme.default .bonus-message { color: rgb(0 90 12); background-color: #6eff6d; }
.theme.default .clear-button { color: rgb(180, 180, 180); }
.theme.default .final-score { color: #000; }

/* THEME: MIDNIGHT */

.theme.midnight { background: rgb(3,84,133); background: linear-gradient(180deg, rgb(0 118 189) 0%, rgb(172 0 175) 100%); }
.theme.midnight input[type="button"], .theme.midnight input[type="submit"], .theme.midnight button { background-color: #5100b3; color: #00e7ff; border-radius: 4px; font-weight: bold; box-shadow: none; border: 1px solid #000; }
.theme.midnight input[type="number"] { border-radius: 4px; font-weight: bold; border: 1px solid #000; }
.theme.midnight table td { border: 1px solid rgb(0, 0, 0); }
.theme.midnight table td.score { color: #ffffff; text-shadow: 2px 2px 0 #000; }
.theme.midnight table td.label { background-color: rgba(0, 0, 0, 0.25); color: #d8d8d8; }
.theme.midnight table td.label .text { text-shadow: none; }
.theme.midnight table td.summary-score { background-color: rgba(0, 0, 0, 0.75); color: #fff; text-shadow: 0px 0px 16px #fff; }
.theme.midnight .bonus-message { color: #5100b3; background-color: #00e7ff; }
.theme.midnight .clear-button { color: #d8d8d8; }
.theme.midnight .score-label { font-size: 0.8em; }
.theme.midnight .final-score { color: rgb(255, 255, 255); box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.35); }
.theme.midnight select.theme-picker { background-color: #000000; color: #00e7ff; border: 1px solid #000; border-radius: 3px; }
.theme.midnight .reset-button { padding: 3px 16px; background-color: #5100b3; }

/* THEME: TERMINAL */

.theme.terminal { background-color: rgb(0, 0, 0); }
.theme.terminal input[type="button"], .theme.terminal input[type="submit"], .theme.terminal button { background-color: #0F0; color: #000; border-radius: 0; }
.theme.terminal input[type="number"] { font-weight: bold; background-color: #000; color: #0F0; border: 1px solid #0F0; border-radius: 0; }
.theme.terminal table.scorecard { background-color: #000000; }
.theme.terminal table td { border: 1px solid #0F0; }
.theme.terminal table td.score { color: #0F0; }
.theme.terminal table td.label { background-color: #000000; color: #0F0; }
.theme.terminal table td.buttons button { border: 1px solid #000; }
.theme.terminal table td.summary-score { background-color: #000; color: #0F0; }
.theme.terminal .bonus-message { color: #000; background-color: #0F0; border-radius: 0; }
.theme.terminal .clear-button { color: #0F0; }
.theme.terminal .final-score { color: #0F0; }
.theme.terminal select.theme-picker { background-color: #000000; color: #0F0; border: 1px solid #0F0; border-radius: 0; }

/* THEME: BERRY */

.theme.berry { background-color: #daa3ff; }
.theme.berry input[type="button"], .theme.berry input[type="submit"], .theme.berry button { background-color: #e322ff; color: #FFF; border-radius: 16px; font-weight: bold; }
.theme.berry input[type="number"] { border-radius: 12px; font-weight: bold; }
.theme.berry table.scorecard { background-color: #d1f3ff; }
.theme.berry table td { border: 1px solid #000; }
.theme.berry table td.score { color: #3400ad; }
.theme.berry table td.label { background-color: #602fe3; color: #FFF; }
.theme.berry table td.label .text { text-shadow: 0 0 16px #fff; }
.theme.berry table td.buttons button { border: 1px solid #000; }
.theme.berry table td.summary-score { background-color: #000; color: #ffffff; }
.theme.berry .bonus-message { color: rgb(255, 255, 234); background-color: #cf00cc; border-radius: 8px; }
.theme.berry .clear-button { color: #ff92e7; }
.theme.berry .final-score { color: #000; }
.theme.berry select.theme-picker { background-color: #d1f3ff; color: #4b00ff; border: 1px solid #000; }
.theme.berry .reset-button { padding: 0.5 1em; }

/* THEME: OCEAN */

.theme.ocean { background-color: #1c61ca; }
.theme.ocean input[type="button"], .theme.ocean input[type="submit"], .theme.ocean button { background-color: #114a8b; color: #ebf8ff; border-radius: 10px; font-weight: bold; box-shadow: none; border: none; }
.theme.ocean input[type="number"] { border-radius: 10px; font-weight: bold; border: none; }
.theme.ocean table.scorecard { background-color: #76dbff; }
.theme.ocean table td { border: 1px solid #000; }
.theme.ocean table td.score { color: #000000; }
.theme.ocean table td.label { background-color: #348eca; color: rgb(235, 248, 255); }
.theme.ocean table td.label .text { text-shadow: 1px 1px 0 #000; }
.theme.ocean table td.summary-score { background-color: rgb(0, 31, 78); color: #ffffff; }
.theme.ocean .bonus-message { color: rgb(136, 255, 249); background-color: #084ed1; border-radius: 8px; }
.theme.ocean .clear-button { color: #004b69; }
.theme.ocean .score-label { font-size: 0.8em; }
.theme.ocean .final-score { color: #000; }
.theme.ocean select.theme-picker { background-color: #7bc4ff; color: #00293a; border: 1px solid #000; border-radius: 10px; }
.theme.ocean .reset-button { padding: 3px 16px; background-color: rgb(8, 46, 82); }

/* THEME: SUNFLOWER */

.theme.sunflower { background-color: #fff; }
.theme.sunflower input[type="button"], .theme.sunflower input[type="submit"], .theme.sunflower button { background-color: #FF0; color: #000; border-radius: 4px; font-weight: bold; box-shadow: none; border: 1px solid #000; }
.theme.sunflower input[type="number"] { border-radius: 4px; font-weight: bold; border: 1px solid #000; }
.theme.sunflower table.scorecard { background-color: #fbffd7; }
.theme.sunflower table td { border: 1px solid #000; }
.theme.sunflower table td.score { color: #000000; }
.theme.sunflower table td.label { background-color: #fcff55; color: #000; }
.theme.sunflower table td.label .text { text-shadow: none; }
.theme.sunflower table td.summary-score { background-color: #000; color: rgb(255, 255, 102); }
.theme.sunflower .bonus-message { color: #000; background-color: #FF0; }
.theme.sunflower .clear-button { color: #5e5701; }
.theme.sunflower .score-label { font-size: 0.8em; }
.theme.sunflower .final-score { color: #000; }
.theme.sunflower select.theme-picker { background-color: #fbffd7; color: #000; border: 1px solid #000; border-radius: 3px; }
.theme.sunflower .reset-button { padding: 3px 16px; background-color: #FF0; }

/* THEME: COLORFUL */

.theme.colorful { background-color: #000; background-image: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,146,0,1) 20%, rgba(255,255,0,1) 40%, rgba(0,255,0,1) 60%, rgba(0,0,255,1) 80%, rgba(203,0,255,1) 100%); }
.theme.colorful input[type="button"], .theme.colorful input[type="submit"], .theme.colorful button { background-color: #000; color: #FFF; border-radius: 4px; font-weight: bold; box-shadow: none; border: 1px solid #000; }
.theme.colorful input[type="number"] { border-radius: 4px; font-weight: bold; border: 1px solid #000; }
.theme.colorful table td { border: 1px solid rgb(0, 0, 0); }
.theme.colorful table td.score { background-color: rgba(0, 0, 0, 0.35); color: #ffffff; font-weight: bold; text-shadow: 0px 0px 8px #000; }
.theme.colorful table td.label { background-color: rgba(0, 0, 0, 0.65); color: #eee; }
.theme.colorful table td.label .text { text-shadow: none; }
.theme.colorful table td.summary-score { background-color: rgba(0, 0, 0, 0.75); color: #fff; }
.theme.colorful .bonus-message { color: #000; background-color: #FFF; }
.theme.colorful .clear-button { color: #d8d8d8; }
.theme.colorful .score-label { font-size: 0.8em; }
.theme.colorful .final-score { color: rgb(255, 255, 255); box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.75); text-shadow: 1px 1px 0 #000; }
.theme.colorful select.theme-picker { background-color: #000; color: #FFF; border: 1px solid #000; border-radius: 3px; }
.theme.colorful .reset-button { padding: 3px 16px; background-color: #000; }

/* THEME: SURPRISE ME */

.theme.surprise input[type="button"], .theme.surprise input[type="submit"], .theme.surprise button { background-color: #000; color: #FFF; border-radius: 4px; font-weight: bold; box-shadow: none; border: 1px solid #000; }
.theme.surprise input[type="number"] { border-radius: 4px; font-weight: bold; border: 1px solid #000; }
.theme.surprise table td { border: 1px solid rgb(0, 0, 0); }
.theme.surprise table td.score { background-color: rgba(0, 0, 0, 0.35); color: #ffffff; font-weight: bold; text-shadow: 0px 0px 8px #000; }
.theme.surprise table td.label { background-color: rgba(0, 0, 0, 0.65); color: #eee; }
.theme.surprise table td.label .text { text-shadow: none; }
.theme.surprise table td.summary-score { background-color: rgba(0, 0, 0, 0.75); color: #fff; }
.theme.surprise .bonus-message { color: #000; background-color: #FFF; }
.theme.surprise .clear-button { color: #d8d8d8; }
.theme.surprise .score-label { font-size: 0.8em; }
.theme.surprise .final-score { color: rgb(255, 255, 255); box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.75); text-shadow: 1px 1px 0 #000; }
.theme.surprise select.theme-picker { background-color: #000; color: #FFF; border: 1px solid #000; border-radius: 3px; }
.theme.surprise .reset-button { padding: 3px 16px; background-color: #000; }

@media (min-width: 40em) {
    body { max-width: 400px; margin: 0 auto; }
}