html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; 
}

#cover {
    
}


.row {
    display: flex;
    flex-direction: row;
    gap: 15px;
}


#diceTesting {
    position: absolute;
}

#testing-dice-box {
    width: 200px;
    height: 200px;
  background-image: url(/public/assets/woodgrain2.jpg);
  background-size: cover;
  pointer-events: none; 
  z-index: 1;
}

#testing-dice-box canvas {
    pointer-events: none; 
  width: 100%;
  height: 100%;
  z-index: 1;
}

h1, h2, p {
    z-index: 9999;
}



#diceGrid {
    position: absolute;
    height: 55vh;
    width: 100vw;
    top: 10vh;
    display: grid;
    gap: 8vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
} 

#player-dice-box {

  background-image: url(/public/assets/woodgrain2.jpg);
  background-size: cover;
  pointer-events: none; 
  z-index: 1;
}

#player-dice-box canvas {
    pointer-events: none; 
  width: 100%;
  height: 100%;
  z-index: 1;
}

#enemy-dice-box {


  background-image: url(/public/assets/woodgrain2.jpg);
  background-size: cover;
  pointer-events: none; 
}

#enemy-dice-box canvas {
    pointer-events: none; 
  width: 100%;
  height: 100%;
  z-index: 1;
}



#cardHolder{
   display: grid;
   width: 100%;
   height: 75%;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   gap: 25px; 
   place-items: center;

}

.statCard {
    display: flex;
    align-items: center; 
    flex-direction: column;
    background-color: green;
    border-radius: 25px;
    width: 50%;
    height: 100%;
}

.actionButton {
    height: 100%;
    border-radius: 25px;
    width: 50%;
    height: 100%;
}



#bottomSpace {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top: 5%;
    height: 5%;
    width: 100%;
}

#diceButton {
    width: 25%;
}