/* The Universal Selector */
*, /* All elements*/
*::before, /* All ::before pseudo-elements */
*::after { /* All ::after pseudo-elements */
  /* height & width will now include border & padding by default
     but can be over-ridden as needed */
  box-sizing: inherit;
}

body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 250px 350px 240px 180px;
  grid-template-rows: 290px 140px 210px;
  background-image: url("../images/sand2.jpg");
  font-family: 'Vollkorn', serif;
  font-weight: bold;
  --box-color: 4px solid black;
  --btn-content: "Dark Mode";
  --background-btn: black;
  --text-btn: white;
}

body.dark {
  background-image: url("../images/sand5.jpg");
  color: rgb(255, 255, 255);
  border: white;
  --box-color: 4px solid rgb(255, 255, 255);
  --btn-content: "Light Mode";
  --background-btn: white;
  --text-btn: black;
}

.msg-box {
  border: var(--box-color);
  border-radius: 10px;
  grid-column: 2/3;
  grid-row: 2/3;
  margin-top: 25px;
  margin-left: 15px;
  width: 550px;
  height: 80px;
}

  .log {
    grid-column: 5/6;
    grid-row: 1/2;
    border: 0px solid black;
    margin-top: -8px;
    margin-right: 0px;
    content: url("../images/geckoBowtie.png");
    object-fit: cover;
    width: 400px;
    height: 450px; 
  }


.scoreboard {
  grid-column: 4/5;
  grid-row: 3/4;
  text-align: left;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 25px;
}

#d-card-value {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: 18px 0 0 130px;
  font-size: 20px;
}

#p-card-value {
  grid-column: 1/2;
  grid-row: 3/4;
  margin: 42px 0 0 130px;
  font-size: 20px;
}

#main-msg {
  margin: 5px 15px;
  font-size: 40px;
  text-align: center;
}

.new {
  margin-left: -83px;
}

.move {
  animation: backInLeft;
  animation-duration: 1s;
}

#deal {
  grid-column: 1/4;
  grid-row: 2/3;
  margin-left: 50px;
  margin-top: 40px;
  width: 150px;
  height: 50px;
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  border-radius: 20px;
  border-width: 4px;
  border-color: black;
  background-color: rgb(255, 255, 255);
}

#dealer-hand {
  grid-column: 1/4;
  grid-row: 1/2;
  margin-left: 30px;
}

#player-hand {
  grid-column: 1/4;
  grid-row: 3/4;
  margin-left: 30px;
  margin-top: 25px;
}

#deck {
  grid-column: 4/5;
  grid-row: 1/2;
  margin-top: -4px;
  margin-left: -4px;
}

.choices {
  grid-column: 2/3;
  grid-row: 3/4;
  margin-top: 10px;
}

#hit {
  width: 80px;
  height: 40px;
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  border-radius: 10px;
  border-width: 2px;
  border-color: black;
  margin: 5px;
  background-color: rgb(208, 21, 21);
  color: white;
}

#stand {
  width: 80px;
  height: 40px;
  font-family: 'Vollkorn', serif;
  font-size: 18px;
  border-radius: 10px;
  border-width: 2px;
  border-color: black;
  margin: 5px;
  background-color: rgb(52, 52, 191);
  color: white;
}

#light-dark {
  grid-column: 5/6;
  grid-row: 4/5;
  height: 50px;
  width: 80px;
  margin-top: 15px;
  margin-left: 260px;
  border-radius: 20px;
  border: black;
  background-color: var(--background-btn);
  color: var(--text-btn);
}

#light-dark::after {
  content: var(--btn-content);
}