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

  overflow: hidden;
  background: #398760;
background: radial-gradient(circle,rgba(57, 135, 96, 1) 39%, rgba(51, 96, 73, 1) 72%, rgba(50, 92, 71, 1) 100%);
}
#cardBunch {
  position: relative;
}
#cardBunch > div {
  position: absolute;
  left: 0;
  top: 0;
}
#playArea {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}
.card {
  display: grid;
  width: 100px;
  height: 180px;
  border: 1px solid black;
  border-radius: 15px;
  background-color: white;
  padding: 10px 5px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "topleft . . . ."
    ". middlec middlec middlec ."
    ". middlec middlec middlec ."
    ". middlec middlec middlec ."
    ". . . . bottomright";
}

.numLC {
  grid-area: topleft;
}

.numRC {
  grid-area: bottomright;
}
.middleCont {
  grid-area: middlec;
}

.middleImg {
  width: 100%;
}
#topBar {
  height: 30%;
  width: 100%;
  background-image: url("../images/counters/woodBrown.jpg");
  background-repeat:repeat;
  background-size: 34%;
  padding: 15px 25px;
  border-bottom: 1px solid black;
  box-shadow: 0 5px 20px black;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  
}
#bottomBar {
  z-index: 1;
  height: 80%;
  width: 100%;
  display: flex;
  gap: 110px;
  align-items: flex-start;
  padding: 25px;
  justify-content: left;


}
.cardVal1 {
}
.cardVal1 {
}
.cardVal2 {
}
.cardVal3 {
}
.cardVal4 {
}
.cardVal5 {
}
.cardVal6 {
}
.cardVal7 {
}
.cardVal8 {
}
.cardVal9 {
}
.cardVal10 {
}
.cardVal11 {
}
.cardVal12 {
}
.cardVal13 {
}
#stackOne {
  position: relative;
}
.stacks {
  position: relative;
}
.stacks .card {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 25px);
}
/* CARDS Posistion */