html {
    text-align: center;
    font-family: Arial;
    font-size: 20pt;  
  }
  h1 {
    color:bisque
  }
  p
  {
    color: beige;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    background: rgb(70, 70, 70);
    height: 75vh;
    display: grid;
    align-items: center;
  }
  /* Help keep Game grid in the center */
  .center {
    margin: 0 auto;
  }
  .hidden {
    display: none;
  }
  .cannotuse {
    cursor: not-allowed;
  }
  /* Positioning*/
  div#game-screen {
    grid-template-columns: 1fr 1fr 1fr;
  }
  div#game-screen .m-top div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    background-image: linear-gradient(to top, rgb(160, 117, 92) 0%, rgb(160, 117, 92)100%);
    padding: 5px 15px;
    border: none;
    border-radius: 1px;
    color: black;
    margin-top: 2rem;
    cursor: pointer;
    position: relative;
    outline: none;
  }
  div#game-screen .m-top div span {
    font-size: 22px;
    cursor: pointer;
    position: relative;
  }
  .grid{
    display: grid !important;
    cursor: pointer;
    position: relative;
  }
  p.display-turn {
    font-size: 22px;
    font-family: Times New Roman;
    letter-spacing: .8px;
    cursor: pointer;
  

  }
  div#game-screen .m-top {
    margin-top: 70px;
    cursor: pointer;
    position: relative;
  }
  div#game-screen .m-top p {
    font-size: 50px;
    cursor: pointer;
    position: relative;
  }
  
  /*Game table and cell */
  .table {
    max-width: 420px;
    max-height: 4500px;
    width: 85vw; 
    height: 85vw;
    border-spacing: 4px 2px;  
    cursor: pointer;
  }
  td {
    padding: 0;
    width: 33%;  
    height: 33%;
    cursor: pointer;
    
    
  }
  .cell {
    font-size: 60.16px;
    height: 65px;
    width: 65px;
    display: grid;
    place-content: center;
    padding: 0;
    background: bisque;
    transition: all 0.35s;
    cursor: pointer;
  }
  .wincell {
    background-color: rgb(95, 38, 5);  /*  highlight the winning line */
  }
  .player-two {
    color: rgb(143, 85, 19);  /*  Computer's color */
  }
  
  /*restart button*/
  #restart {
    font-size: 1rem;
 
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    color: rgb(206, 121, 9);
    margin-top: 2rem;
    cursor: pointer;
    position: relative;
    transition: all 0.55s;
    outline: none;
    background-color: blanchedalmond;
  }
  
  .choose,
  #restart {
    border-radius: 0.3em;
  }
  .choose:active,
  #restart:active {
    background-color: rgb(82, 50, 9); 

    outline: none;
  }
  
  
  .btn-green {
    background-color: blanchedalmond;
  }
  .btn-green:active {
    /*Override the active background for #restart */
    background-color: #814500 !important;
  }