



.gamespace{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ddd;
  padding: 2vmin;
  border-color: black;
  border-style: solid;
  border-radius: 10px;
  width: 70vmin;
  height: 90vmin;
  margin: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

h1 {
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 10vmin;
  margin-bottom: 1vmin;
  margin-top: 1vmin;
}

#message {
  display: flex;
  justify-content: center;
  min-height: 5vmin; 
  min-width: 25vmin; 
  margin-bottom: 1vmin;
  margin-top: 1vmin;
  text-align: center;
  border-radius: 5%;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  background-color: rgb(115, 247, 144);
}

h2 {
  display: flex;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
  padding-top: .1vmin;
}

.head {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 5vmin;
  align-items: center;
  margin-bottom: .25vmin;
  border-radius: 5%;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  padding-left: 5px;
  padding-right: 5px;
  height: 7vmin;
}

.label {
  font-weight: bold;
  margin-bottom: 0.5vmin;
  font-size: 2.5vmin;
}

  .minefield {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(6, 7vmin);
    grid-template-rows: repeat(6, 7vmin);
    gap: 0vmin;
    margin-top: .5vmin;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  }

  .minefield>div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0%;
    border: .6vmin solid grey;
    border-color: black;
    background-color: rgb(32, 32, 32);
    border-top-color: rgb(156, 156, 156);
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: rgb(156, 156, 156);
    
  }
  
  /* button {
    width: 2em;
    height: 2em;
    padding: 0;
  } */


  