body {
    font-family: Arial;
}

table.score-card th,
table.score-card td {
    border: 1px solid black;
}

table.score-card {
    border-collapse: collapse;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}

table.score-card td,
table.score-card th {
    text-align: center;
    padding: 5px;
}

table.score-card th:first-child,
table.score-card td:first-child {
    text-align: left;
    width: 150px;
    line-height: 100%;
}

table.score-card td.how-to {
    width: 100px;
    font-size: small;
    background-color: #eee;
}

table.score-card td:nth-child(3),
table.score-card td:nth-child(4) {
    width: 100px;
}

table.score-card tr.category-row.open {
    cursor: pointer;
}

tr {
    height: 50px;
}

td.score-cell.potential {
    color: transparent;
    user-select: none;
}

td.score-cell {
    line-height: 1;
}

@media (hover: hover) {
    table.score-card
        tr.category-row.open:hover 
        td.score-cell.potential {
        color: #00994d;
        font-weight: bold;
        user-select: auto;
    }

    table.score-card tr.category-row.open:hover {
        background-color: #ecf9ff;
    }

    table.score-card
        tr.category-row.open:hover 
        td.score-cell.potential.zero {
        color: red;
    }
}

.die-icon {
    font-size: 50px;
    transform: rotate(90deg);
    float: right;
}

button {
    align-self: center;
    background-color: hsl(220, 80%, 57%);
    border: none;
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
    justify-self: center;
    padding: 0.9rem 2rem;
    color: white;
    outline: 0;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}
.large {
    width: 100%;
    max-width: 450px;
}

.medium {
    width: 275px;
}

button:hover {
    cursor: pointer;
    opacity: 0.9;
}

#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-container {
    padding-top: 200px;
    text-align: center;
}

#game-container.playing.loading #score-card-container,
#game-container.playing.loading .controls-container,
#game-container #score-card-container,
#game-container .controls-container {
    display: none;
}

#game-container.playing .menu-container {
    display: none;
}

.loading-container {
    display: none;
    padding-top: 200px;
    text-align: center;
}

#game-container.playing.loading .loading-container {
    display: block;
}

#game-container.playing #score-card-container,
#game-container.playing .controls-container{
    display: block;
}

#score-card-container.single-player th:nth-child(4),
#score-card-container.single-player td:nth-child(4) {
    display: none;
}

#score-card-container.single-player .score-cell {
    width: 200px;
}

.container {
    margin: 25px 25px 0 25px;
    padding-bottom: 25px;
    width: 450px;
}

.controls-container {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

#turn-message {
    font-weight: 600;
    font-size: 20px;
}

#help-text {
    color: #555;
    font-style: italic;
}

@media (max-width: 1000px) {
    .controls-container {
        position: fixed;
        background-color:
        white;
        width: 100%;
        bottom: 0;
        border-top: 1px solid black;
    }

    #score-card-container {
        padding-bottom: 290px;
    }

    .container {
        margin: 0;
    }
}

.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: hsl(220, 80%, 57%);
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

.hidden {
    display: none;
}

button:disabled {
    background-color: #dddddd;
    color: #777777;
    cursor: not-allowed;
}

#game-over-message,
.score-message {
    display: none;
}

.game-over .score-message {
    display: block;
}

.game-over #roll-button,
.game-over .dice,
.game-over #help-text,
.game-over #action-message {
    display: none;
}

.score-card-links {
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #eee;
    }

    .score-card {
        background-color: #383838;
    }

    table.score-card td.how-to {
        background-color: #555;
    }

    a {
        color: hsl(220, 80%, 65%);
    }

    #help-text {
        color: #aaa;
    }

    button {
        background-color: hsl(220, 80%, 35%);
        color: #eee;
    }

    button:disabled {
        background-color: #555;
        color: #999;
    }

    @media (hover: hover) {
        table.score-card tr.category-row.open:hover {
            background-color: hsl(199, 100%, 21%);
        }

        table.score-card tr.category-row.open:hover td.score-cell.potential {
            color: hsl(150, 100%, 47%);
            font-weight: bold;
            user-select: auto;
        }
    }
   
    @media (max-width: 1000px) {
        .controls-container {
            background-color: #222;
        }
    }
}