html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#cribbage-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #E3D6BB;
}

    #cribbage-container #lobby {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 360px;
        height: 280px;
        background-color: white;
        border-radius: 20px;
        text-align: center;
        padding: 30px;
    }

        #cribbage-container #lobby .lobby-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
        }

        #cribbage-container #lobby button {
            margin-top: 10px;
        }

    #cribbage-container button.btn-primary {
        background-color: #0096D0;
        border-color: #0096D0;
    }

    #cribbage-container button.btn-red {
        background-color: #D81F27;
        border-color: #D81F27;
    }

    #cribbage-container button.action {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 200;
    }

    #cribbage-container #board-container {
        position: relative;
        height: 100%;
        float: left;
        background: url('assets/wood.svg');
    }

        #cribbage-container #board-container img#board {
            position: relative;
            width: auto;
            height: 100%;
        }

            #cribbage-container #board-container button {
                background-color: #D81F27;
                border: none;
                color: white;
                border-radius: 50%;
                position: absolute;
                top: 0.5rem;
                right: -2.5rem;
                z-index: 200;
                width: 2rem;
                height: 2rem;
            }

        #cribbage-container .marker {
            position: absolute;
            height: 1.5vh;
            width: 1.5vh;
            margin: -2.5%;
            transition: all 1s ease;
            border-radius: 50%;
            border: 1px solid white;
        }

            #cribbage-container .marker.track-1 {
                background-color: #D81F27;
            }

            #cribbage-container .marker.track-2 {
                background-color: white;
                border: 1px solid black;
            }

            #cribbage-container .marker.track-3 {
                background-color: #0096D0;
            }

    #cribbage-container #log-container {
        position: relative;
        height: 100%;
        width: 15rem;
        float: left;
        padding: 3rem 1rem 1rem 1rem;
        overflow: hidden;
    }

        #cribbage-container #log-container span {
            display: block;
            font-size: 0.9rem;
        }

    #cribbage-container #table-container {
        position: relative;
        height: 100%;
        width: auto;
        overflow: hidden;
    }

#table-container div.player-cards-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

#table-container div.player-container {
    position: absolute;
    height: 33%;
}

#table-container div.name {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    top: 75%;
    margin: 0.5rem;
}

    #table-container div.name .marker {
        position: relative;
        display: inline-block;
        vertical-align: baseline;
        margin: 0;
        padding-right: 0.1rem;
    }

    #table-container div.name.current-player {
        font-weight: bold;
    }

        #table-container div.name.current-player.track-1 {
            font-weight: bold;
            color: white;
            background-color: #D97C80;
        }

        #table-container div.name.current-player.track-2 {
            font-weight: bold;
            background-color: white;
        }

        #table-container div.name.current-player.track-3 {
            font-weight: bold;
            color: white;
            background-color: #9DC2D1;
        }

#table-container div.player-container-0 { left: 0%; top: 67%; width: 100% }
#table-container.game-2-players div.player-container-1 { left: 0%; top: 0%; width: 100% }
#table-container.game-3-players div.player-container-1 { left: 0%; top: 0%; width: 50% }
#table-container.game-3-players div.player-container-2 { left: 50%; top: 0%; width: 50% }
#table-container.game-4-players div.player-container-1 { left: 0%; top: 0%; width: 33% }
#table-container.game-4-players div.player-container-2 { left: 33%; top: 0%; width: 33% }
#table-container.game-4-players div.player-container-3 { left: 66%; top: 0%; width: 33% }

#table-container img.card {
    position: absolute;
    width: auto;
    height: 25%;
    transition: all 1s ease;
}

#table-container img.deck {
    position: absolute;
    width: auto;
    height: 25%;
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
    transition: all 1s ease;
}

#table-container #count {
    position: absolute;
    width: 100%;
    transform: translate(-50%, 0%);
    top: 62.5%;
    left: 50%;
    text-align: center;
    font-size: 1rem;
}

#table-container img.card.on-deck {
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
}

#table-container img.card.card-player { transform: translate(-50%, 0%); }
#table-container img.card.card-player.selected-for-crib { transform: translate(-50%, -20%); }
#table-container img.card.put-in-crib {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
#table-container img.card.crib-score { transform: translate(-50%, -50%); }

#table-container img.card.score-highlight { transform: translate(-50%, -20%); }
#table-container img.card.card-player.score-highlight:not(.card-player-0) { transform: translate(-50%, 20%); }
#table-container img.card.on-deck.score-highlight { transform: translate(-100%, -70%); }
#table-container img.card.crib-score.score-highlight { transform: translate(-50%, -70%); }

#table-container img.card.card-player-0 { top: 67%; }
#table-container img.card.card-player-1 { top: 0%; }
#table-container img.card.card-player-2 { top: 0%; }
#table-container img.card.card-player-3 { top: 0%; }

/* CARD POSITIONS 2 players */
#table-container img.card.card-player:nth-child(1):nth-last-child(6) {
    left: 30%;
}

#table-container img.card.card-player:nth-child(1):nth-last-child(5) {
    left: 34%;
}

#table-container img.card.card-player:nth-child(1):nth-last-child(4),
#table-container img.card.card-player:nth-child(2):nth-last-child(5) {
    left: 38%;
}

#table-container img.card.card-player:nth-child(1):nth-last-child(3),
#table-container img.card.card-player:nth-child(2):nth-last-child(4) {
    left: 42%;
}

#table-container img.card.card-player:nth-child(1):nth-last-child(2),
#table-container img.card.card-player:nth-child(2):nth-last-child(3),
#table-container img.card.card-player:nth-child(3):nth-last-child(4) {
    left: 46%;
}

#table-container img.card.card-player:nth-child(1):nth-last-child(1),
#table-container img.card.card-player:nth-child(2):nth-last-child(2),
#table-container img.card.card-player:nth-child(3):nth-last-child(3) {
    left: 50%;
}

#table-container img.card.card-player:nth-child(2):nth-last-child(1),
#table-container img.card.card-player:nth-child(3):nth-last-child(2),
#table-container img.card.card-player:nth-child(4):nth-last-child(3) {
    left: 54%;
}

#table-container img.card.card-player:nth-child(3):nth-last-child(1),
#table-container img.card.card-player:nth-child(4):nth-last-child(2) {
    left: 58%;
}

#table-container img.card.card-player:nth-child(4):nth-last-child(1),
#table-container img.card.card-player:nth-child(5):nth-last-child(2) {
    left: 62%;
}

#table-container img.card.card-player:nth-child(5):nth-last-child(1) {
    left: 66%;
}

#table-container img.card.card-player:nth-child(6):nth-last-child(1) {
    left: 70%;
}

/* CARD POSITIONS 3 players */
/* Player 1 */
#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(6) {
    left: 15%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(5) {
    left: 17%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(4),
#table-container.game-3-players img.card.card-player-1:nth-child(2):nth-last-child(5) {
    left: 19%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(3),
#table-container.game-3-players img.card.card-player-1:nth-child(2):nth-last-child(4) {
    left: 21%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(2),
#table-container.game-3-players img.card.card-player-1:nth-child(2):nth-last-child(3),
#table-container.game-3-players img.card.card-player-1:nth-child(3):nth-last-child(4) {
    left: 23%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(1):nth-last-child(1),
#table-container.game-3-players img.card.card-player-1:nth-child(2):nth-last-child(2),
#table-container.game-3-players img.card.card-player-1:nth-child(3):nth-last-child(3) {
    left: 25%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(2):nth-last-child(1),
#table-container.game-3-players img.card.card-player-1:nth-child(3):nth-last-child(2),
#table-container.game-3-players img.card.card-player-1:nth-child(4):nth-last-child(3) {
    left: 27%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(3):nth-last-child(1),
#table-container.game-3-players img.card.card-player-1:nth-child(4):nth-last-child(2) {
    left: 29%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(4):nth-last-child(1),
#table-container.game-3-players img.card.card-player-1:nth-child(5):nth-last-child(2) {
    left: 31%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(5):nth-last-child(1) {
    left: 33%;
}

#table-container.game-3-players img.card.card-player-1:nth-child(6):nth-last-child(1) {
    left: 35%;
}

/* Player 2 */
#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(6) {
    left: 65%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(5) {
    left: 67%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(4),
#table-container.game-3-players img.card.card-player-2:nth-child(2):nth-last-child(5) {
    left: 69%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(3),
#table-container.game-3-players img.card.card-player-2:nth-child(2):nth-last-child(4) {
    left: 71%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(2),
#table-container.game-3-players img.card.card-player-2:nth-child(2):nth-last-child(3),
#table-container.game-3-players img.card.card-player-2:nth-child(3):nth-last-child(4) {
    left: 73%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(1):nth-last-child(1),
#table-container.game-3-players img.card.card-player-2:nth-child(2):nth-last-child(2),
#table-container.game-3-players img.card.card-player-2:nth-child(3):nth-last-child(3) {
    left: 75%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(2):nth-last-child(1),
#table-container.game-3-players img.card.card-player-2:nth-child(3):nth-last-child(2),
#table-container.game-3-players img.card.card-player-2:nth-child(4):nth-last-child(3) {
    left: 77%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(3):nth-last-child(1),
#table-container.game-3-players img.card.card-player-2:nth-child(4):nth-last-child(2) {
    left: 79%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(4):nth-last-child(1),
#table-container.game-3-players img.card.card-player-2:nth-child(5):nth-last-child(2) {
    left: 81%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(5):nth-last-child(1) {
    left: 83%;
}

#table-container.game-3-players img.card.card-player-2:nth-child(6):nth-last-child(1) {
    left: 85%;
}

/* CARD POSITIONS 4 players */
/* Player 1 */
#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(6) {
    left: 11%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(5) {
    left: 12%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(4),
#table-container.game-4-players img.card.card-player-1:nth-child(2):nth-last-child(5) {
    left: 13%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(3),
#table-container.game-4-players img.card.card-player-1:nth-child(2):nth-last-child(4) {
    left: 14%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(2),
#table-container.game-4-players img.card.card-player-1:nth-child(2):nth-last-child(3),
#table-container.game-4-players img.card.card-player-1:nth-child(3):nth-last-child(4) {
    left: 15%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(1):nth-last-child(1),
#table-container.game-4-players img.card.card-player-1:nth-child(2):nth-last-child(2),
#table-container.game-4-players img.card.card-player-1:nth-child(3):nth-last-child(3) {
    left: 16%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(2):nth-last-child(1),
#table-container.game-4-players img.card.card-player-1:nth-child(3):nth-last-child(2),
#table-container.game-4-players img.card.card-player-1:nth-child(4):nth-last-child(3) {
    left: 17%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(3):nth-last-child(1),
#table-container.game-4-players img.card.card-player-1:nth-child(4):nth-last-child(2) {
    left: 18%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(4):nth-last-child(1),
#table-container.game-4-players img.card.card-player-1:nth-child(5):nth-last-child(2) {
    left: 19%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(5):nth-last-child(1) {
    left: 20%;
}

#table-container.game-4-players img.card.card-player-1:nth-child(6):nth-last-child(1) {
    left: 21%;
}

/* Player 2 */
#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(6) {
    left: 45%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(5) {
    left: 46%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(4),
#table-container.game-4-players img.card.card-player-2:nth-child(2):nth-last-child(5) {
    left: 47%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(3),
#table-container.game-4-players img.card.card-player-2:nth-child(2):nth-last-child(4) {
    left: 48%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(2),
#table-container.game-4-players img.card.card-player-2:nth-child(2):nth-last-child(3),
#table-container.game-4-players img.card.card-player-2:nth-child(3):nth-last-child(4) {
    left: 49%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(1):nth-last-child(1),
#table-container.game-4-players img.card.card-player-2:nth-child(2):nth-last-child(2),
#table-container.game-4-players img.card.card-player-2:nth-child(3):nth-last-child(3) {
    left: 50%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(2):nth-last-child(1),
#table-container.game-4-players img.card.card-player-2:nth-child(3):nth-last-child(2),
#table-container.game-4-players img.card.card-player-2:nth-child(4):nth-last-child(3) {
    left: 51%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(3):nth-last-child(1),
#table-container.game-4-players img.card.card-player-2:nth-child(4):nth-last-child(2) {
    left: 52%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(4):nth-last-child(1),
#table-container.game-4-players img.card.card-player-2:nth-child(5):nth-last-child(2) {
    left: 53%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(5):nth-last-child(1) {
    left: 54%;
}

#table-container.game-4-players img.card.card-player-2:nth-child(6):nth-last-child(1) {
    left: 55%;
}

/* Player 3 */
#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(6) {
    left: 78%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(5) {
    left: 79%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(4),
#table-container.game-4-players img.card.card-player-3:nth-child(2):nth-last-child(5) {
    left: 80%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(3),
#table-container.game-4-players img.card.card-player-3:nth-child(2):nth-last-child(4) {
    left: 81%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(2),
#table-container.game-4-players img.card.card-player-3:nth-child(2):nth-last-child(3),
#table-container.game-4-players img.card.card-player-3:nth-child(3):nth-last-child(4) {
    left: 82%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(1):nth-last-child(1),
#table-container.game-4-players img.card.card-player-3:nth-child(2):nth-last-child(2),
#table-container.game-4-players img.card.card-player-3:nth-child(3):nth-last-child(3) {
    left: 83%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(2):nth-last-child(1),
#table-container.game-4-players img.card.card-player-3:nth-child(3):nth-last-child(2),
#table-container.game-4-players img.card.card-player-3:nth-child(4):nth-last-child(3) {
    left: 84%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(3):nth-last-child(1),
#table-container.game-4-players img.card.card-player-3:nth-child(4):nth-last-child(2) {
    left: 85%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(4):nth-last-child(1),
#table-container.game-4-players img.card.card-player-3:nth-child(5):nth-last-child(2) {
    left: 86%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(5):nth-last-child(1) {
    left: 87%;
}

#table-container.game-4-players img.card.card-player-3:nth-child(6):nth-last-child(1) {
    left: 88%;
}