#playerHand, #dealerHand {
  display: flex;
  flex-direction: row;
  justify-content: center;
  clear: both;
  border: 1px solid #444;
  margin-bottom: 10px;
  padding-top: 10px; }
  #playerHand .playerCard, #playerHand .dealerCard, #dealerHand .playerCard, #dealerHand .dealerCard {
    position: relative;
    z-index: 0;
    float: left;
    margin-bottom: 10px; }
    #playerHand .playerCard.hearts, #playerHand .playerCard.diamonds, #playerHand .dealerCard.hearts, #playerHand .dealerCard.diamonds, #dealerHand .playerCard.hearts, #dealerHand .playerCard.diamonds, #dealerHand .dealerCard.hearts, #dealerHand .dealerCard.diamonds {
      color: red; }
    #playerHand .playerCard.clubs, #playerHand .playerCard.spades, #playerHand .playerCard.back, #playerHand .dealerCard.clubs, #playerHand .dealerCard.spades, #playerHand .dealerCard.back, #dealerHand .playerCard.clubs, #dealerHand .playerCard.spades, #dealerHand .playerCard.back, #dealerHand .dealerCard.clubs, #dealerHand .dealerCard.spades, #dealerHand .dealerCard.back {
      color: black; }
    #playerHand .playerCard span, #playerHand .dealerCard span, #dealerHand .playerCard span, #dealerHand .dealerCard span {
      font-size: 150px;
      user-select: none; }
    #playerHand .playerCard span:after, #playerHand .dealerCard span:after, #dealerHand .playerCard span:after, #dealerHand .dealerCard span:after {
      content: "";
      position: absolute;
      display: inline-block;
      z-index: -1;
      background: white;
      border-radius: 15px;
      margin-left: -150px;
      width: 134px;
      height: 100%;
      margin-left: -143px; }

#game p {
  text-align: center;
  font-size: 12px; }
#game #dealerScore, #game #playerScore {
  font-size: 21px;
  margin: 0 auto; }

#start {
  max-width: 400px;
  margin: 0 auto; }
  #start p, #start pre {
    text-align: center;
    margin-bottom: 15px; }

form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 300px;
  clear: both;
  margin: 0 auto; }
  form input {
    width: calc(75% - 5px);
    margin-right: 5px;
    text-align: center;
    font-size: 24px; }
  form input::-webkit-outer-spin-button,
  form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  form input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */ }
  form button {
    font-size: 24px;
    width: calc(25%); }

#buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 450px;
  clear: both;
  margin: 0 auto; }
  #buttons button {
    width: calc(16.67% - 5px); }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

button, input {
  background-color: black;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px;
  transition: ease .2s; }

button:focus, button:hover, input:focus, input:hover {
  background-color: #222; }

button:hover {
  transform: scale(1.05); }
button:disabled {
  opacity: 0.2; }
  button:disabled:hover {
    transform: scale(1); }

* {
  margin: 0;
  padding: 0;
  outline: none; }

body, html {
  background-color: #333;
  color: white; }

.hidden {
  display: none; }

main {
  max-width: 900px;
  margin: 0 auto; }

pre {
  font-size: 25px; }

/*# sourceMappingURL=main.css.map */