body { font-family: 'Arial', sans-serif; }

table { border-collapse: collapse; margin-bottom: 1em; }
td, th { padding: 0.5em; border: 1px solid #8d8d8d; min-width: 2em; text-align: center; }
tr:nth-child(even) { background-color: #dfdfdf; }
tr:nth-child(odd) { background-color: #f7f7f7; }
thead th { background-color: #444444; color: #FFF; }

body { padding: 1em; min-width: 360px; background: linear-gradient(180deg,rgba(48, 238, 250, 1) 0%, rgba(186, 228, 66, 1) 100%); }

input[type="number"], input[type="text"] { padding: 0.5em; border-radius: 4px; border: 1px solid #AAA; box-shadow: inset 2px 2px 1px #bababa; }

.player-name { font-weight: bold; }
.player-name.dealer { background: linear-gradient(0deg,rgba(168, 189, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); }

a.player-edit { display: block; cursor: pointer; }
.player-score-input, .score-edit-input { max-width: 64px; }
.score-edit-input { margin-right: 0.5em; }

.score-edit-container { min-width: 160px; }

.btn { display: inline-block; padding: 0.5em 1em; box-shadow: 0 2px 0 #000, 0 4px 4px rgba(0, 0, 0, 0.5); border-radius: 4px; color: #000; font-weight: bold; border: none; cursor: pointer; }
.btn:active { position: relative; top: 2px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
.btn.primary { color: #FFF; text-shadow: 1px 1px 0 #000; background: linear-gradient(0deg,rgba(63, 94, 251, 1) 0%, rgba(116, 212, 252, 1) 100%); }
.btn.danger { color: #FFF; text-shadow: 1px 1px 0 #000; background: linear-gradient(0deg,rgba(150, 39, 39, 1) 0%, rgba(255, 101, 54, 1) 100%); }

.button-options { margin-top: 1em; }

.modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); }
.modal .modal-content { margin: 0 auto; padding: 1em; position: relative; top: 24px; width: auto; max-width: 90%; background-color: #FFF; border-radius: 8px; box-shadow: 0 8px 16px #858585; }

.content { max-width: 100%; margin: 0 auto; padding: 1em; background-color: #FFF; border-radius: 8px; box-shadow: 0 8px 24px #464646; }
.overflow { overflow: auto; width: 100%; }

.menu { padding: 0.5em 0.5em 0.75em 0.5em; margin: 0.5em 0 0 0; background-color: #c8c8c8; border-radius: 4px; }
.menu input[type="text"] { width: 100%; margin-bottom: 1em; }

@media (min-width: 36em) {
 
    .content { max-width: 800px; }
    .modal .modal-content { max-width: 600px; padding: 1em 2em 2em 2em; }
    .menu input[type="text"] { width: auto; }

}

@media (min-width: 40em) {

    .content { padding: 2em; }

}