body {
  display: grid;
  font-family: sans-serif;
  font-size: 24px;
  margin: 0;
  min-height: 100vh;
  grid-template-columns: repeat(7,minmax(0,1fr));
  grid-template-rows: repeat(7,minmax(0,1fr));
  gap: 5px;
}

.board {
  background-image: url("../images/green_felt_table.jpeg");
  grid-column: 1/7;
  grid-row: 2/7;
  display:flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
  gap: 0 7vh;
  padding: 15px;
}

.board > img:first-child {
  border: 6px dashed red;
}

.board > img:last-child {
  border: 6px dashed red;
}

.opponent {
  background-image: url("../images/rustic_wood_tabletop.jpeg");
  grid-column:1/7;
  grid-row:1/2;
  display:flex;
  justify-content:space-around;
}

.player{
  background-image: url("../images/rustic_wood_tabletop.jpeg");
  grid-column:1/7;
  grid-row:7/9;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

img {
  height:13vh;
}

.deal {
  background-image: url("../images/chalkboard.jpeg");
  grid-column:7/8;
  grid-row: 2/7;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#draw-btn {
  grid-column: 7/8;
  grid-row:7/8;
}


#start-btn {
  grid-column: 7/8;
  grid-row:1/2;
}

#reset-btn {
  grid-column: 7/8;
  grid-row:1/2;
}

#message {
  color:white;
  font-family: 'Homemade Apple', cursive;
}

.rotate {
  transform: rotate(-90deg);
}

.rotate-pos-ninty{
  transform: rotate(90deg);
}

.rotate-neg-ninty{
  transform: rotate(-90deg);
}