/*
AUTHOR      -  Vansham Aggarwal 
EMAIL       -  vanshamagg@gmail.com
*/

body {
      background-color: #121212;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
      font-family: monospace;
}

/* COMMON CLASSES START */
.table {
      background-color: #121212;
      color: black;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: monospace;
}
.blackjack {
      color: white;
      font-size: 10vw;
      margin: auto;
      margin-top: 20px;
      width: 90%;
      text-align: center;
}
.card-flipped {
      --basic-color: rgb(85, 12, 12);
      width: 120px;
      min-height: 180px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      margin-left: 7px;
      margin-right: 7px;
      color: var(--basic-color);
      background-color: var(--basic-color);
      border: 1px solid blue;
}

.card {
      width: 120px;
      min-height: 180px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      margin-left: 7px;
      margin-right: 7px;
}

.card:hover .card-value {
      background-color: white;
      color: black;
}
.card:hover .card-suite {
      background-color: white;
      color: black;
}
.card:hover {
      background-color: white;
      color: black;
      border: 1px solid black;
}

.card > .card-value {
      font-family: sans-serif;
      font-size: 1.5em;
      margin: 2px;
}

.card > .card-suite {
      font-size: 100px;
      text-align: center;
}

.console {
      position: absolute;
      right: 10px;
      width: auto;
      text-align: center;
      padding-top: 70px;
      font-size: 15px;
      color: white;
      align-self: self-end;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
}
/* COMMON CLASSES END */

/* Dealers Area START */

.dealer {
      background: transparent;
      /* max-height: 200px; */
      min-height: 100px;
      min-width: 100%;
      margin-top: 0px;
      display: flex;
      flex-direction: row;
      justify-content: center;
}
.deck {
      position: absolute;
      left: 10px;
      width: 100px;
      text-align: center;
      padding-top: 70px;
      font-size: 30px;
      color: white;
      align-self: self-end;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
}

.deck p {
      margin: 0px;
}

.dealer .hand,
.player > .hand {
      min-width: 200px;
      display: flex;
      flex-direction: row;
      padding: 2px;
}

/* Dealer's Area End */

/* ACTION AREA */
.actions {
      height: 32vh;
      width: 50vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}

.actions > input[type="button"] {
      padding: 15px;
      font-family: monospace;
      font-size: 1.8em;
      border-radius: 8px;
      border-style: none;
      margin: 5px;
      background-color: rgb(37, 37, 37);
      color: white;
      cursor: pointer;
      transition: 0.2s;
}
.actions > input[type="button"]:hover {
      padding: 18px;
      font-size: 1.9em;
      font-weight: bold;
}
.actions > input[type="button"]:disabled {
      display: none;
}

/* ACTION AREA END */

/* PLAYER AREA START */
.players-area {
      background: transparent;
      height: 30vh;
      min-width: 200px;
      width: 98vw;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
}

.player {
      background: transparent;
      height: 30vh;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
}

.player > .player-name {
      width: 100%;
      font-family: monospace;
      color: white;
      text-transform: uppercase;
      font-size: 15px;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 15px;
}

.active {
      border-bottom: 5px solid white;
}

/* PLAYER AREA END */