@font-face {
    font-family: 'playing_cardsregular';
    src: url('fonts/cards_webfontkit/cards-webfont.woff2') format('woff2'),
         url('fonts/cards_webfontkit/cards-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.cards {
  font-family: playing_cardsregular, san-serif;
  font-weight: normal;
  font-styel: normal;
  font-size: 150px;
  padding: 0px;
  margin: 10px;
}

.red {
  color: red;
}

#wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:flex-start;

  }

#hitStayAnotherGameBtns, #hitBtnSpan, #anotherGameSpan {
  padding: 10px;

}

#hitButton, #anotherGameButton, #stayButton, #newGameButton {
  transition-duration: .3s;
}

.bgd-img {
  /* background-image: url(images/markus-spiske-QOuHmf0_qqk-unsplash.jpg); */
  /* background-image: url(images/jt-gqCYRe2ml6k-unsplash.png); */
  background-image: url(images/mjs_ace_jack.png);

  mjs_ace_jack.png
  background-size: cover;
  background-repeat: no-repeat;
  background-position:top;
  height: 130vh;

}


button[disabled]:active, button[disabled],
button[disabled]:hover,
#hitButton[disabled]:hover,
#hitButton[disabled],
#stayButton[disabled],
#stayButton[disabled]:hover,
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
  transform: scale(1);
}

#winsLoses, #bet, #bankAmt{

  /* margin-left: 20px; */
}

#newGameButton{
  padding: 10px;

}

#hitButton:active, #anotherGameButton:active, #stayButton:active, #newGameButton:active {
  background-color: blue;
}

#stayButton:hover {
  color: white;
  background-color: red;
  transform: scale(1.5);
  transition-duration: .3s;
}

#hitButton:hover, #anotherGameButton:hover, #newGameButton:hover {
  color: white;
  background-color: green;
  transform: scale(1.5);
  transition-duration: .3s;
}

.transformed{
  background-color: yellow;
  transform: scale(1.5);
}

#credit_bet_winsLossesDiv {
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;
}

#bet, #winsLosses, #bankAmt {
  margin: 20px;
}

#dealer-area, #player1-area{
  padding: 0px;
  margin: 0px;
  font-size: 25px;
}

#PlayerScoreDiv, #DealerScoreDiv {
  font-weight: bold;
  font-size: 30px;
  margin:0px;
  padding: 0px;
}


#player1-area-cards, #dealer-area-cards{
  padding: 0px;
}

#winLoseDiv {
  /* margin-left: 30px; */
  font-weight: bold;
  font-size: 40px;
  padding: 0px;
  margin: 0px;
  /* border-radius: 25px;
  border: 2px solid black; */
}


@media screen and (max-width 1800){
  .cards {
    font-family: playing_cardsregular, san-serif;
    font-weight: normal;
    font-styel: normal;
    font-size: 150px;
    padding: 0px;
    margin: 0px 10px 0px 10px
  }




}


@media screen and (max-width: 650px){
    .cards {
        display: flex;
        font-family: playing_cardsregular, san-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 75px;
        padding: 0px;
        flex-wrap: wrap;
        max-width: 500px;
        justify-content: center;
        margin: 0px;
        padding: 0px;
      }


    #winLoseDiv {
      /* margin-left: 30px; */
      font-weight: bold;
      font-size: 20px;
      padding: 0px;
      margin: 0px;
    }
    .score{
      font-weight: bold;
      font-size: 20px;
      margin: 0px;
      padding: 0px;
      align-content: center;
      justify-content: center;
    }

    #PlayerScoreDiv, #DealerScoreDiv {
        font-weight: bold;
        font-size: 25px;
        margin: 0px;
        padding: 0px;
    }

    #dealer-area, #player1-area{
        max-width: 500px;
        padding: 0px 10px 0px 10px;
        align-items: center;
        flex-wrap: wrap;
        font-size: 15px;
        justify-content: center;
    }

    p#playerScore, #dealerScore{
        margin: 5px;

    }
    #credit_bet_winsLossesDiv {
        margin: 0px;
        padding: 0px;
    }
    #bet, #winsLosses, #bankAmt {
      margin: 5px;
      font-size: 15px;
    }
    #title{
      font-size: 20px;
      margin: 0px;
    }
    #bet {
      width: 80px;;
    }
    .bgd-img {
      /* background-image: url(images/markus-spiske-QOuHmf0_qqk-unsplash.jpg); */
      background-image: url(images/mjs_ace_jack.png);
      background-repeat: no-repeat;
      background-position:top;
      height: 130vh;
    }


    #hitStayAnotherGameBtns, #hitBtnSpan, #anotherGameSpan {
      padding: 3px;
      margin-rigth: 2px;
      margin-left: 2px;
      margin-top: 0px;
      margin-bottom: 0px;
    }
}