h1, h2, h3 {
    margin: 2px;
    padding: 0px;
    font-family: Arial, Verdana, sans-serif;
    color: gold;
}
h2 {
    font-size: medium;
}
.divxxx {
    float: inline-start;
    padding: 2px;
}
.card {
    width: 120px;
    height: 186.5px;
    border: solid 1px black;
    border-radius: 5px;
    float: left;
    text-align: center;
    font-size: larger;
    background-image: url("/images/b3_crew1_playingcards.webp");
    background-size: 1200px 746px;
}
.comms {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.33);
    text-align: center;
    font-size: x-large;
    float:left;
    margin: 20px;
}
.comms-sel {
    background-color: rgba(0,255,0,0.33);
}
.comms-used {
    background-color: rgba(255,0,0,0.33);
}
.round {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: rgba(100,100,255,0.33);
    text-align: center;
    font-size: x-large;
    float:left;
    margin: 20px;
}
.vertical-container {
    position: relative;
}
.vertical-center {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.smallcard {
    width: 120px;
    height: 160px;
    border: solid 1px black;
    border-radius: 3px;
    float: left;
    text-align: center;
    font-size: medium;
    /*transform: translate(-25%,-25%) scale(50%);*/
}
#goals {
    margin:auto;
}
.goal-container {
    float: left;
    width: 65px;
    height: 100px;
}
.goal-constraint {
    border-radius: 100px;
    border: solid 2px;
    width: 15px;
    height: 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: medium;
    background-color: darkslategrey;
    color: white;
    margin: 1px;
    padding: 5px;
    float: left;
}
.goal-card {
    width: 25px;
    height: 50px;
    border: solid 1px black;
    border-radius: 3px;
    text-align: center;
    font-size: medium;
}
.goal-player {
    font-size: small;
    text-align: center;
    padding: 2px;
    width: 24px;
    float: left;
}
.not-player-turn {
    color: blue;
}
.player-turn {
    color: red;
}
.player-captain {
    list-style: "♕";
}
.player-name {
    display: inline-block;
    width: 80px;
}
.player-comms {
    text-align: right;
}
#trick {
    height: 180px;
}
#message {
    width: 100%;
    text-align: center;
    float: inline-start;
}
#mission {
    font-family: 'Courier New', Courier, monospace;
}
.grid-container {
    display: grid;
    grid-template-areas:
        'goals goals last-trick player'
        'goals goals last-trick players'
        'trick trick trick players'
        'hand hand hand hand'
        'debug debug debug debug';
    gap: 2px;
    background-image: url("/images/b3_crew1_background.jpg");
    background-size: cover;
    padding: 2px;
}
.grid-container > div {
    padding: 2px 0;
    /*background-color: rgba(255, 255, 255, 0.0);*/
    color: rgba(0,255,0,1);
}
.grid-header {
    grid-area: header;
}
.grid-player {
    grid-area: player;
}
.grid-goals {
    grid-area: goals;
}
.grid-last-trick {
    grid-area: last-trick;
    height: 160px;
}
.grid-players {
    grid-area: players;
}
.grid-trick {
    grid-area: trick;
}
.grid-hand {
    grid-area: hand;
}
.grid-debug {
    grid-area: debug;
}
#debug {
    width: 100%;
    background-color: rgba(0,0,0,0);
    color: green;
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
}
.my-turn {
    animation: mymove 2s infinite;
    animation-direction: alternate;
}

@keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}