@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap');

/* 
  Generic styling
*/
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

:root {
  /* Initialise gloabl vars */
  /* Sans-Serif font family fallbacks: Arial, Helvetica, sans-serif */
  /* Serif font family fallbacks: Georgia, Times, serif */

  --bg-colour: #076314; /* background colour */
  --header-font-family: "Lora", serif;
  --text-font-family: "Roboto Slab", serif;
  --card-font-family: "Roboto Slab", serif;
  --card-back-colour: #00f; /* playing card reverse */
  --text-font-size: 1.6rem;
  --btn-font-size: 1.6rem;
  --btn-colour: #9acd32;
  --btn-active-colour: #aaff01;
}

html {
  /* Set root font-size to 10px so that 1rem becomes 10px  */
  font-size: 62.5%;
}

body {
  background-color: var(--bg-colour);
  color: #fff;
  font-family: var(--text-font-family, Georgia, Times, serif);
  font-size: var(--text-font-size);
}

h1 {
  font-family: var(--header-font-family);
  font-weight: bold;
  text-align: center;
  text-shadow: black 1px 3px 4px; /* color offset-x offset-y blur-radius */
}

p {
  font-family: var(--card-font-family);
}

footer {
  align-items: center;
  font-size: medium;
}

.copyright-msg {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: .5rem;
}

.social-link {
  color: black;
}

.btn {
  background-color: var(--btn-colour);
  border: 2px solid black;
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--btn-font-size);
  height: 4rem;
  margin: 0rem 1.5rem;
  min-width: 8rem;
  padding: 0 1rem;
  text-align: center;
  box-shadow: 1px 3px 4px 1px rgba(0,0,0, 0.1);
}

.btn:hover, .btn:focus {
  background-color: var(--btn-active-colour);
  cursor: pointer;
}

#btn-play {
  display: block;
}

#btn-settings,
#btn-about,
#btn-hit,
#btn-deal,
#btn-stay,
#btn-again,
#btn-reset {
  display: none;
}

#btn-info {
  min-width: unset;
}

.score {
  font-size: x-large;
  text-shadow: black 1px 3px 4px;
}

.msg-text {
  font-size: large;
  text-shadow: black 1px 3px 4px;
}

/* 
  Main game area containers
*/
#outer-container {
  width: 100%;
  height: 90vh;
}

#lhs-container, #rhs-container {
  width: 20%;
}

#centre-container {
  width: 60%;
}

#player0, #player1 {
  height: 30%;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}

#status {
  height: 4rem;
  width: 100%;
}

#bet {
  height: 4rem;
  width: 100%;
}

#controls-section {
  height: 6rem;
  width: 100%;
}

#player-pot {
  height: auto;
}

#stack {
  padding: 2rem 1rem 4rem 1rem;
}

#score0, #score1, #lhs-top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30%;
}

/* 
  Flexbox container styles for row & column
*/
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-jc-fe {
  justify-content: flex-end;
}

.flex-jc-sb {
  justify-content: space-between;
}

.flex-jc-sa {
  justify-content: space-around;
}

.flex-ai-c {
  align-items: center;
}

/* 
  Playing card styling
*/
.card {
  height: 9rem;
  width: 6rem;
  background-color: white;
  border: 1px solid black;
  border-radius: 9px;
  color: black;
  font-family: var(--card-font-family, Georgia, Times, serif);
  font-size: 2rem;
}

.card-back {
  height: 9rem;
  width: 6rem;
  background-color: var(--card-back-colour);
  border: .35rem solid white;
  border-radius: 8px;
  color: var(--card-back-colour);
  font-size: 2rem;
}

.red-suit {
  color: red;
}

.card-rank {
  padding: 0px 4px;
}

.card-suit {
  padding: 0px 2px;
}

.suit-big {
  line-height: 6rem;
  font-size: 4.5rem;
  padding: 0px 4px;
}

/* 
  Chip styling
*/
.chip {
  background-color: white;
  border: 7px dashed;
  border-radius: 50%;
  font-family: inherit;
  height: 5rem;
  margin: 4px;
  text-align: center;
  width: 5rem;
}

.chip:hover, .chip:focus {
  cursor: pointer;
}

.chip-10 {
  border-color: blue;
}
.chip-20 {
  border-color: grey;
}
.chip-50 {
  border-color: orange;
}
.chip-100 {
  border-color: black;
}

/*
  Modal styling
*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: rgba(238, 244, 244, 0.8);  /* #eef4f4 */
  border: 3px solid var(--btn-colour);
  border-radius: 4px;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50rem;
  margin: 15% auto;
}

/* The Close Button */
.btn-close-modal {
  font-size: xx-large;
}

.btn-close-modal:hover,
.btn-close-modal:focus {
  color: var(--btn-active-colour);
  text-decoration: none;
  cursor: pointer;
}

.modal-content p {
  margin: 1rem 2rem;
}

.modal-content h2 {
  margin: 1rem;
}

.modal-list {
  margin-bottom: 1.5rem;
  width: 80%;
}

.input-wrapper {
  width: 100%;
  margin-bottom: 2rem;
}

.input-lbl, .input-txt {
  width: 50%;
  padding: 1rem;
}

.input-txt {
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
}

input[type="radio"]{
  margin: 0 12px 0 2px;
}

/* 
* Media queries for responsive design
*/
/* For small screen sizes 600px and up */
@media screen and (min-width: 600px) {
  #centre-container {
    width: 360px;
  }

  .card {
    font-size: 2.6rem;
  }
  
  .card, .card-back {
    height: 12rem;
    width: 8rem;
  }

  .suit-big {
    font-size: 7rem;
    padding-top: 1.3rem;
    padding-left: 3px;
  }

  .msg-text {
    font-size: x-large;
  }

  .chip {
    font-size: 2rem;
    height: 7rem;
    width: 7rem;
  }
}

/* For screen sizes 900px and up */
@media screen and (min-width: 900px) {
  .card {
    font-size: 2.6rem;
  }
  
  .card, .card-back {
    height: 15rem;
    width: 10rem;
  }

  .card-rank {
    padding: 0px 6px;
  }
  
  .suit-big {
    font-size: 8rem;
    padding-top: 2.5rem;
    padding-left: 4px;
  }

  .modal-content {
    margin: 5% auto;
  }

  h1 {
    font-size: 4rem;
    letter-spacing: 1px;
  }

}

/* For screen sizes 1200px and up */
@media screen and (min-width: 1200px) {
  #centre-container {
    justify-content: space-evenly;
  }

  h1 {
    font-size: 4.5rem;
    letter-spacing: 1.5px;
  }
}