body {
  background-color: #2D5C30;
}
.mainPage {
  background-image: url('../src/img/backgroundImg.jpg');
  margin: 0;
  height: 100vh;
  background-repeat : no-repeat;
  background-size : cover;
}

/* 메인페이지 */
.title {
  display: inline-block;
  position: absolute;
  top: 2vh;
  left: 3vw;
  font-size: 20vh;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 0.3vh black;
}
.linkButton {
  position: absolute;
  bottom: 10vh;
  left: 3vw;
}
.linkButton a {
  text-decoration: none; 
  display: block;
  color: white;
  font-size: 5vh;
  font-weight: 600;
  -webkit-text-stroke: 0.2vh black;

  transition-duration: 0.2s;
}
.linkButton a:hover {
  color: rgba(255, 255, 255, 0.719);
}
a {
  text-decoration: none;
}
.mainPage footer {
  color: black;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  -webkit-text-stroke: 1px white;
  bottom: 10px;
  right: 10px;
}
.history header, .history header a, .help header, .record header {
  font-size: 8vh;
  text-align: center;
  padding-top: 5px;
  left: 45vw;
  color: white;
  font-weight: bolder;
  -webkit-text-stroke: 0.2vh black;
}
.customizing header {
  font-size: 8vh;
  text-align: center;
  padding-top: 5px;
  left: 45vw;
  color: white;
  font-weight: bolder;
  -webkit-text-stroke: 0.2vh black;
}
.history section article, .help section article {
  font-size: 5vh;
  position: absolute;
  /* top: 20vh; */
  color: white;
  font-weight: bolder;
  -webkit-text-stroke: 0.2vh black;
}

/* 카드 속성 */
.dealerCards, .playerCards {
  text-align: center;
  padding-left: 5vw;
}



.card, .dealerBackCard, .firstCard {
  height: 35vh;
  margin: 0 0 0 -10vh;
  border: 2px solid black;
  border-radius: 1.1em;
}


/* 볼륨 조절 */
.voluemControls {
  position: absolute;
  top: 2%;
  right: 3%;
  text-align: center;
  background-color: rgba(128, 128, 128, 0.574);
  padding: 0 2vw;
  border: 1px solid white;
  border-radius: 0.5vw;
}
.controlsText {
  padding: 2vh 0;
  margin: 0;
  font-size: 3vh;
  font-weight: bold;
  -webkit-text-stroke: 0.2vh black;
  color: white;
}
#volume {
  width: 10vw;
}

/* 게임 가운데 프린팅 */
.blackJack {
  color: white;
  font-size: 3.5em;
  margin: 0;
  padding: 0;
  font-weight: bolder;
}

.blackJackPay2to1 {
  text-align: center;
  color: red;
  display: inline-block;
  font-size: 3em;
  font-weight: bold;
  margin: 0 0 0.5em 0;
  padding: 0em 1em;
  border: 5px solid white;
}
.centerLogo {
  text-align: center;
}

.backButton {
  position: absolute;
  top: 2vh;
  left: 2vw;
  text-decoration: none; 
  color: white;
  font-size: 5vh;
  -webkit-text-stroke: 0.7vh white;

  transition-duration: 0.1s;
}
.backButton:hover {
  color: rgb(230, 230, 230);
  -webkit-text-stroke: 0.7vh rgb(230, 230, 230);
}

/* 게임 관련 버튼 */
nav form {
  position: absolute;
  bottom: 0%;
}
nav form button {
  display: block;
  font-size: 4vh;
  font-weight: bold;
  color: black;
  width: 20vh;
  height: 15vh;
  border: 0;
  border-radius: 0em;
  margin: 0.5em 0.5em 0.5em 0.1em;
  cursor: pointer;
}
bet {
  color: lightgreen;
}
hit {
  color: lightcoral;
}
stand {
  color: lightcyan;
}
chips {
  color: gold;
}
A {
  font-size: 120%;
  color: darkgray;
}
J, Q, K {
  font-size: 120%;
  color: rebeccapurple;
}
.betButton {
  background-color: lightgreen;

  transition-duration: 0.3s;
}
.hitButton {
  background-color: lightcoral;

  transition-duration: 0.3s;
}
.standButton {
  background-color: lightcyan;

  transition-duration: 0.3s;
}
.betButton:hover {
  background-color: rgba(144, 238, 144, 0.5);
}
.hitButton:hover {
  background-color: rgba(240, 128, 128, 0.5);
}
.standButton:hover {
  background-color: rgba(224, 255, 255, 0.5);
}

/* Score 표시 테이블 */
.game aside {
  display: inline-block;
  position: absolute;
  right: 1%;
  top: 2%;
}
.game th {
  border: 2px solid black;
  font-size: 3vh;
  padding: 1vh 3vh 1vh 3vh;
  text-align: center;
  background-color: darkseagreen;
}
.game td {
  border: 2px solid black;
  font-size: 3vh;
  padding: 2vh 3vh 2vh 3vh;
  text-align: center;
  background-color: darkseagreen;
}
.gameScore {
  border: 2px solid black;
  /* border-collapse: collapse; */
  background-color: darkgreen;
}


/* chip */
.chipsArea {
  position: absolute;
  bottom: 0%;
  right: 0%;
}
.chipsArea2 {
  position: absolute;
  bottom: 10%;
  right: 0%;
}
.chips {
  display: inline-block;
  color: white;
  font-size: 3em;
  font-weight: bold;
  margin-right: 0.5em;
}
#chipsNumber {
  display: inline-block;
  color: gold;
  font-size: 2.3em;
  font-weight: 800;
  margin-right: 1em;
}
.bettingChips {
  display: inline-block;
  color: white;
  font-size: 2em;
  font-weight: bold;
  margin-right: 0.5em;
}
#bettingNumber {
  display: inline-block;
  color: #ADFF00;
  font-size: 2em;
  font-weight: 800;
  margin-right: 1em;
}

.resultBox {
  position: absolute;
  top: 30vh;
  left: 25vw;
}
.winFont, .burstFont, .pushFont {
  display: block;
  text-align: center;
  font-size: 25vh;
  font-weight: bolder;
  -webkit-text-stroke: 0.3vh black;
}
.winFont {
  color: #5C9DFF;
}
.burstFont {
  color: #FF6666;
}
.pushFont {
  color: #ADFF00;
}
.winnerComment {
  display: block;
  text-align: center;
  font-size: 4vh;
  font-weight: bold;
  -webkit-text-stroke: 0.2vh black;
  color: #C376FF;
}
.caption {
  display: block;
  text-align: center;
  font-size: 3vh;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 0.2vh black;
}

@keyframes chip {
  0% {top: -100%;}

  100% {top: 30%;}
}
@keyframes chip2 {
  0% {top: -78%;}

  100% {top: 52%;}
}
@keyframes chip3 {
  0% {top: 30%;}

  100% {top: -100%;;}
}
.chipImg {
  position: absolute;
  top: 30%;
  left: -40%;
  width: 35%;
  
  animation-name: chip;
  animation-duration: 6s;
  animation-iteration-count: 1;
}

.chipImg2 {
  position: absolute;
  top: 52%;
  left: -45%;
  width: 35%;

  animation-name: chip2;
  animation-duration: 6s;
  animation-iteration-count: 1;
}
.chipImg3 {
  position: absolute;
  top: -100%;
  left: -40%;
  width: 35%;
  
  animation-name: chip3;
  animation-duration: 6s;
  animation-iteration-count: 1;
}


.resultChips{
  display: block;
  text-align: center;
  font-size: 3vh;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 0.2vh black;
}
#bettingChipsResult {
  text-align: center;
  font-size: 4vh;
  font-weight: bold;
  color: gold;
  /* -webkit-text-stroke: 0.2vh black; */
}

.backCard {
  height: 35vh;
  border: 2px solid black;
  margin: 10px;
  border-radius: 1.1em;
}
.cardImgShop {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 5%;
}
.cardImgShop button {
  text-decoration: none;
  color: white;
  font-size: 4vh;
  font-weight: 600;
  margin: 5px;
  -webkit-text-stroke: 0.2vh black;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0.164);
  padding: 3px 10px;
  cursor: pointer;

  transition-duration: 0.5s;
}
.price0 {
  text-decoration: none;
  color: white;
  font-size: 4vh;
  font-weight: 600;
  margin: 5px;
  -webkit-text-stroke: 0.2vh black;
}
.price {
  text-decoration: none;
  color: white;
  font-size: 4vh;
  font-weight: 600;
  margin: 5px;
  -webkit-text-stroke: 0.2vh gold;
}

.resetButton {
  text-decoration: none;
  color: white;
  font-size: 4vh;
  font-weight: 600;
  margin: 5px;
  -webkit-text-stroke: 0.2vh black;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0.164);
  padding: 3px 10px;
  position: absolute;
  right: 5%;
  top: 5%;
  cursor: pointer;

  transition-duration: 0.5s;
}
.resetButton2 {
  text-decoration: none;
  color: white;
  font-size: 4vh;
  font-weight: 600;
  margin: 5px;
  -webkit-text-stroke: 0.2vh black;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0.164);
  padding: 3px 10px;
  cursor: pointer;

  transition-duration: 0.5s;
}
.recordAddButton {
  text-decoration: none;
  font-size: 5vh;
  font-weight: 600;
  margin: 1vh;
  -webkit-text-stroke: 0.2vh black;
  color: white;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0.164);
  padding: 2vh 3vw;
  cursor: pointer;

  transition-duration: 0.5s;
}
.recordAddButtonSmall {
  text-decoration: none;
  font-size: 3vh;
  font-weight: 600;
  margin: 1vh;
  -webkit-text-stroke: 0.1vh black;
  color: white;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0.164);
  padding: 1vh 1.5vw;
  cursor: pointer;

  transition-duration: 0.5s;
}


.recordButtons {
  text-align: center;
  padding-top: 5vh;
}

green {
  color: lightgreen;
}
blue {
  color: lightblue;
}
red {
  color: lightcoral;
}

.cardImgShop button:hover, .resetButton:hover, .resetButton2:hover, .recordButton:hover, .recordAddButton:hover, .recordAddButtonSmall:hover {
  background-color: rgba(255, 255, 255, 0.719);
}