*{
  margin:0;
  padding:0;
  }

  body{
  background-color:#eae152;
  text-align:center;
  justify-content:center;
  }

  #win{
  margin:5vmin;
  font-size:7vmin;
  background-color:yellow;
  color:orange;
  }

  .container{
  height: 90vh;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  }

  .game{
  height:60vmin;
  width:60vmin;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1vmin;
  }
  
  h1{
  color:orange;
  margin-inline: 10vh;
  padding: 2vh;
  }

  #box{
  height:18vmin;
  width:18vmin;
  font-size:10vmin;
  color:rgb(0,240,119);
  background-color:#eeefa8;
  border-radius:1rem;
  border:none;
  box-shadow:0 0 10px rgba(0, 0, 255, 0.4) 
  }

  .reset{
  padding:0.3rem;
  margin: 2.5vh;
  font-size:3vh;
  border-radius:0.6rem;
  border:none;
  background-color:blue; 
  color:rgb(243, 220, 15);
  }

  .new-game{
  padding:0.3rem;
  margin:0.5rem;
  font-size:3vh;
  border-radius:0.6rem;
  border:none;
  background-color:blue; 
  color:khaki;
  }
  
  .msg-container{
  display:none;
  }

  @media (max-width: 480px) {
    .game {
      height: 95vmin;
      width: 95vmin;
      gap: 2vmin;
    }

    #box {
      height: 25vmin;
      width: 25vmin;
      font-size: 10vmin;
    }

    h1 {
      font-size: 4vh;
      padding: 1vh;
    }

    #win {
      font-size: 6vmin;
      margin: 2vmin;
    }

    .reset,
    .new-game {
      font-size: 2vh;
      padding: 0.3rem 0.6rem;
    }
  }