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

body {
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: rgb(106, 35, 35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 700;
}

.main-section {
  box-shadow: 0 0 90px rgb(254, 254, 254);
  border-radius: 24px;
  width: 650px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.933), rgba(0, 0, 0, 0.829));
  margin: 5px;
  height: 98vh;
}

.body1 {
  background-image: url("./imgs/cards-background.jpg");
  background-position: center;
  background-size: cover;
}

.body2 {
  background-color: rgb(9, 9, 15);
}

.main2 {
  box-shadow: 0 0 90px rgb(49, 61, 196);
}

.none {
  display: none;
}

.block {
  display: block;
}

.active {
  border: 1px solid whitesmoke;
  border-radius: 12px;
  box-shadow: 0 0 50px whitesmoke;
  background-color: rgba(27, 17, 17, 0.676);
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

h1 {
  text-align: center;
  margin-bottom: 8px;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(168, 168, 168));
  color: transparent;
  background-clip: text;
  text-shadow: 0px 0px 98px rgb(164, 15, 15);
  border: solid;
}

#results {
  height: 6px;
  padding: 0;
  margin: 24px 0;
  color: whitesmoke;
  text-shadow: 0 0 50px rgb(0, 4, 221);
}

#house-area {
  color: whitesmoke;
}

#player-area,
#player-area-2,
#player-area-3,
#player-area-4 {
  padding: 4px;
  color: whitesmoke;
  text-shadow: 0 0 20px rgb(44, 0, 201);
}

/* 
Aspect Ratio w * 1.452 
i.e. 500 x 726px
*/
#house-cards img,
#player-cards img,
#player-cards-2 img,
#player-cards-3 img,
#player-cards-4 img {
  height: 118.5px;
  width: 82px;
  margin: 5px;
  box-shadow: 3px 3px 10px whitesmoke;
}

.player-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px 0;
}

button {
  padding: 8px 13px;
  cursor: pointer;
}

#bet {
  color: whitesmoke;
  background-color: black;
  border: none;
  outline: 2px solid whitesmoke;
  border-radius: 50px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 30px 0;
}

#bet:hover {
  background-color: rgba(245, 245, 245, 0.913);
  color: black;
  outline: 2px solid black;
  box-shadow: 0 0 20px whitesmoke;
}

#select-chips {
  justify-content: center;
  margin: 30px 0;
}

.chip-container {
  margin: 4px;
}

.chips {
  border: none;
  box-shadow: 0 0 6px whitesmoke;
  text-shadow: 20px 5px 50px rgb(35, 42, 177);
  border-radius: 50%;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  cursor: pointer;
  font-size: 24px;
  color: whitesmoke;
}

.chips:hover {
  box-shadow: 0 0 10px whitesmoke;
}

.chips:hover + .chip-down {
  box-shadow: 0 0 10px whitesmoke;
}

.chip-down {
  font-size: 20px;
  font-weight: 600;
  background-color: rgb(106, 35, 35);
  padding: 0 8px;
  margin-top: 20px;
  outline: 0.5px solid whitesmoke;
  box-shadow: 0 0 50px whitesmoke;
  border-radius: 5px;
  color: whitesmoke;
  border-style: none;
}

/* .chip-down:hover {
  box-shadow: 0 0 10px whitesmoke;
} */

#chip-5 {
  background-image: linear-gradient(
    rgba(255, 105, 180, 0.729),
    rgba(0, 0, 0, 0.452)
  );
}

#chip-10 {
  background-image: linear-gradient(
    rgba(173, 216, 230, 0.604),
    rgba(0, 128, 0, 0.442)
  );
}

#chip-25 {
  background-image: linear-gradient(
    rgba(255, 0, 0, 0.51),
    rgba(128, 0, 128, 0.731)
  );
}

#chip-50 {
  background-image: linear-gradient(
    rgba(255, 166, 0, 0.72),
    rgba(0, 0, 255, 0.709)
  );
}

#chip-100 {
  background-image: linear-gradient(
    rgba(128, 128, 128, 0.698),
    rgba(0, 0, 0, 0.695)
  );
}

#bank-info {
  margin-top: 3px;
  color: whitesmoke;
  text-shadow: 0 0 50px grey;
  margin: 35px 0;
}

#player-bank-text {
  text-decoration: underline;
}

@media screen and (max-width: 560px) {
  #house-cards img,
  #player-cards img,
  #player-cards-2 img,
  #player-cards-3 img,
  #player-cards-4 img {
    height: 112.5px;
    width: 80px;
    margin: 5px;
  }
}

@media screen and (max-width: 400px) {
  #house-cards img,
  #player-cards img,
  #player-cards-2 img,
  #player-cards-3 img,
  #player-cards-4 img {
    height: 89px;
    width: 61.5px;
    margin: 5px;
  }
}