.container {
        background-color: rgb(236, 105, 105);
        height: 370px;
        width: 370x;
        display: flex;
        justify-content: center;
        border-radius: 25px;
        position: relative;
        top: 10px;
        padding: 10px;
      }
      .box-area {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
      .box {
        height: 100px;
        width: 100px;
        border: 5px solid black;
        background-color: orange;
      }

      .crossarea {
        height: 100px;
        width: 100px;
        border: 5px solid black;
        background-color: rgba(127, 88, 15, 0.653);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .crossarea::after {
        font-size: 4rem;
        content: "X";
      }
      .oarea {
        height: 100px;
        width: 100px;
        border: 5px solid black;
        background-color: rgb(229, 245, 7);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .oarea::after {
        font-size: 4rem;
        color: black;
        content: "O";
      }
      .current {
      
        display: flex;
        justify-content: center;
        font-size: 3rem;
        background: linear-gradient(220deg, #ee4305,#bf949c,#c806dd,rgb(7, 7, 157));
        color: white;
        border-radius: 25px;
      }