/**
 * app.css
 *
 * @author Jeff Schroeder <jeff@boomflag.com>
 * @copyright 2019
 * @license All rights reserved
 */

/* CSS Grid:
 * https://css-tricks.com/snippets/css/complete-guide-grid/ */

/* CSS Flexbox:
 * https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

/* General styles */

@font-face {
    font-family: "Droid Sans";
    src: url(https://static.zingstudios.com/fonts/droid-sans.ttf);
}

body {
    font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10pt;
}

.card {
}

#chat {
    min-height: 60%;
}

.clickable {
    cursor: pointer;
}

.hand {
    height: 50%;
    position: absolute;
}

#menu {
    min-height: 40%;
}

#play-area {
}

.played {
    width: 20%;
    position: absolute;
}

.played-by-left {
    transform: rotate(90deg);
    left: 10%;
}

.played-by-top {
    left: 40%;
    top: 10%;
}

.played-by-right {
    transform: rotate(270deg);
    align: right;
    right: 10%;
}

.played-by-bottom {
    left: 40%;
    bottom: 10%;
}

.player {
    width: 60%;
    object-fit: cover;
    border-radius: 50%;
}

.player-top {
    text-align: center;
}

.player-top .player {
    width: 30%;
}

.player-left {
    text-align: left;
}

.player-right {
    text-align: right;
}

.row-bottom {
    min-height: 40%;
}

.row-middle {
    min-height: 40%;
}

.row-top {
    min-height: 20%;
}