* {
    padding: 0;
    margin: 0;
    justify-items: center;
    margin-bottom: 20px;
}

body {
    height: 100vh;
    width:90%;
    text-align: center;
  justify-content: center;
   /* background: linear-gradient(135deg, #aeadd1, #0122da);*/
    background:linear-gradient(45deg,rgb(182, 88, 88),rgb(101, 101, 182));

}


.container {
margin-top: 5vmin;
    display: flex;
    height: 70vh;
    justify-content: center;
}



.game {
    width: 70vmin;
    height: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;   
}



.box {
    width: 18vmin;
    height: 18vmin;
    border: 1px solid #2295c2;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 0px 10px  rgb(125, 125, 221) ;
    font-size: 3rem;
    font-weight: 700;
    background-color:#1803d8 ;
    color: rgb(12, 12, 11);
    transition: 0.2s ease-in-out;

}
.box:hover {
   
    transform:  scale(1.3);
    box-shadow: 5px 5px 40px rgb(4, 8, 248);
  }

h1{
    margin-top: 1rem;
    color: #0508f0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 4rem;
}

#msg{
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #020305;
    margin: 1rem;

}
#restart{
    margin-top: 40px;
    background-color: #080ce2;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 24px;
    padding: 0.8rem 2rem 0.8rem 2rem;
    font-size: 24px;

    transition: 0.2s ease-in-out;
}

#restart:hover {
    filter: grayscale(8%);
    transform: scale(1.2);
    box-shadow: 5px 5px 40px rgb(240, 240, 247);
  }



  





  .scoreboard {
    display: flex;
    
    gap: 5px;
    margin-bottom: 20px;
    justify-content: center;
  }
  .cell {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: hsl(210, 94%, 34%);

    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 25px;
  }
  .player-x {
    color:  #43f1b7;;
  }
  .player-o {
    color: #f727de;
  }
  .buttons button{
    cursor: pointer;
  }

