/* :root {
    --block-color: #394D61;
    --bg-color: #16181C;
  } */

.container {
    position: relative;
    top: 20vh;
    display:none;
}
  /* body{
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  } */
  div.grid{
    display: none;
    margin: 20px auto;
    width: 600px;
    height: 600px;
    background: #2D3139;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 10px;
  }
  .grid.won .block{
    background: #2a8040;
  }
  .grid.lost .block{
    background: #F22300;
  }
  
  .block{
    background: #394D61;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    cursor: pointer;
  }
  .block.show,.block.correct{
    background: #bfbfbf;
  }
  .block.incorrect{
    background: #F22300;
  }
  .grid.lost .show.block {
    background: #6d9070;
  }
  .grid.lost .block {
    background: #bd5151;
  }
  
  .grid.lost .block.clicked.incorrect {
    background: #F22300;
  }
  .grid.lost .block.clicked.correct {
    background: #bfbfbf;
  }