* {
    box-sizing: border-box;
  }

  
  /*  generale css  */
  body{
    height: 100vh;  
    margin: 0; 
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .game-window{
    margin: 20px;
    height: 70%;
  }



  /*  header and score css  */
  header{
    font-size: 4vmin;
    color: darkgray;
    letter-spacing: 1vmin;
  }

  .score-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: gray;
    font-size: 3vmin;
  }
  
  .score-wrapper > div {
    margin: 10px auto;
  }

  #lives{
    display: flex;
    justify-content:center;
    align-items: center;
  }

  #lives > div {
    background-image: url('../assets/spaceship.png');
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin: 10px;
  }

  /*  Game grid css  */
  
  .grid-wrapper { 
    display: grid;
    grid-template-columns: repeat(7, 10vmin);
    grid-template-rows: repeat(6, 10vmin);
    gap: 2vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 400px;
    border: 2px solid lightgrey;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  }
  
  .grid div {
    border: 1px solid transparent;
    flex-grow: 1;
  }
  

  /*  elements css : spaceship, alien, bom, bolt */

  .grid div.spaceship {
    background-image: url('../assets/spaceship.png');
    /* border: 2px dotted transparent ; */
    /* background-color: green; */
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  .grid div.alien {
    background-image: url('../assets/alien.png');
    /* border: 2px dotted transparent ; */
    /* background-color: blue; */
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  .grid div.bom {
    background-image: url('../assets/bom.png');
    /* border: 2px dotted transparent ; */
    /* border-radius: 50%; */
    /* background-color: black; */
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  .grid div.bolt {
    background-image: url('../assets/bolt.png');
    /* border:  5px  dotted gray; */
    /* background-color: gray; */
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  /*  Buttons css  */
  #button{
    margin-top: 4vmin;
    padding: 2vmin;
    font-size: 2vmin;
    border-radius: 4vmin;
    border: 0.1vmin solid gray;
    color: gray;
  }

  #button:hover{
      color: white;
      background-color: darkgray;
  }

  #messagTextId{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
  }

  #playBtnId{
    align-items: center;
    margin: 10px;
  }