jaipur-score/css/style.css

.group.inactive {
    opacity: 0.4;
}

.group {
    clear: both;
}

.group .coin:first-child {
    margin: 5px 0vh 5px 0vh;
}

.group .coin.selected:first-child {
    margin: 5px 0vh 5px -4vh;
}

.group .coin.selected {
    float: right;
}

.group .coin {
    border-radius: 90px;
    display: inline-block;
    height: 9vh;
    width: 9vh;
    text-align: center;
    border: 1px solid transparent;
    margin: 5px 0vh 5px -4vh;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    color: #d8d8d8;
    background-position: center 72%;
    background-repeat: no-repeat;
    color: black;
    cursor: pointer;
    text-shadow: 0 0 2px #fff;
    font-size: 3vh;
}

.group .coin.leather {
    border-color: saddlebrown;
    /*background: saddlebrown;*/
    background-image: url(../leather.svg);
    background-color: burlywood;
    background-size: 45%
}

.group .coin.spice {
    border-color: forestgreen;
    background-color: #dff9b6;
    background-image: url(../spice.svg);
    background-size: 60%
}

.group .coin.gold {
    border-color: goldenrod;
    background-color: #fcf4ca;
    background-image: url(../gold.svg);
    background-size: 40%;
}

.group .coin.diamond {
    border-color: darkred;
    background-color: #f66282;
    background-image: url(../diamond.svg);
    background-size: 48%;
}

.group .coin.fabric {
    border-color: purple;
    background-color: #f5d6f5;
    background-image: url(../fabric.svg);
    background-size: 71%;
}

.group .coin.silver {
    border-color: silver;
    background-color: #879fc6;
    background-image: url(../silver.svg);
    background-size: 44%;
}

.players {
    display: flex;
    justify-content: space-around;
}

.players .player {
    border: 2px solid dodgerblue;
    padding: 0.5vh 4vh;
    margin: 1.5vh 0;
    color: #444;
    cursor: pointer;
    border-radius: 2px;
    font-weight: bold;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    height: 50px;
}

.players .player.selected {
    background: #6f9cc9;
    color: #f2eeee;

}

.players .accept {
    visibility: hidden;
    border: 2px solid dodgerblue;
    margin: 1.5vh 0;
    height: 50px;
    align-items: center;
    display: flex;
    padding: 0.5vh 4vh;
    font-weight: bold;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    background-color: #bedfff;
    cursor: pointer;
}

.players .accept.on {
    visibility: visible;
}

.players .player.player1 {
}

.players .player.player2 {
}

.players .player .score {
    height: 50px;
    width: 23px;
    display: inline-block;
    background-image: none;
    background-size: auto auto;
    margin: 0 5px;
    background-image: url(../maharaja.svg);
    background-size: 100%;
    background-repeat: no-repeat;

}

.players .player .score:first-child {
    margin-left: 15px;
}

.scoreTable {
    width: 90vw;
    background: #fff;
    content: "";
    height: 70vh;
    position: absolute;
    top: 15vh;
    left: 5vw;
    box-shadow: 0 0 207px #0000027F;
    border: 3px solid #ccc;
    display: block;
}

.scoreTable.visible {
    display: block;
}

.scoreTable h1 {
    text-align: center;

}

* {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

.players_section, .camel_section {
    display: flex;
    justify-content: space-around;
    font-size: 45px;
}

.camel_section .player1_camel, .camel_section .player2_camel {
    background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;
    height: 10vh;
    width: 10vh;
    cursor: pointer;
    opacity: 0.1;
}
.camel_section .nobody {
    opacity: 0.1;
}

.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected
{
    opacity: 1;
}

.score_section {
    display: none;
    font-size: 35px;
    justify-content: space-around;
}

.score_section.show {
    display: flex;
}