* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: linear-gradient(45deg,#0085ff,#b710b1);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .switch {
      position: absolute;
      top: 20px;
      right: 20px;
      display: inline-block;
      width: 70px;
      height: 34px;
      z-index: 2;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #4a6fa5;
      transition: .4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #4a6fa5;
    }

    input:checked + .slider:before {
      transform: translateX(36px);
    }

    .slider .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: white;
      pointer-events: none;
    }

    .slider .sun {
      left: 8px;
    }

    .slider .moon {
      right: 8px;
    }


    .darktheme {
      background: radial-gradient(circle at top, #0f0f1a, #000);
      color: #eaeaea;
      transition: all 0.5s ease, color 0.5s ease;
    }
    .darktheme .game {
      background: rgba(20, 20, 30, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 14px;
      color: #eaeaea;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
      transition: all 0.3s ease;
    }
    .darktheme span{
      color: #00eaff;
      font-weight: 600;
      text-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
    }
    .darktheme .title {
      background: linear-gradient(45deg, #0310f9, 000);
      color: white;
    }
    .darktheme #status {
       background: linear-gradient(90deg, #00f5ff, #ff00c8);
       color: #111;
    }
    .darktheme .scoreboard {
       background: rgba(30, 30, 45, 0.9);
       border: 1px solid rgba(255, 255, 255, 0.08);
       color: #fff;
    }
    .darktheme .cell {
      background: linear-gradient(145deg, #1a1a2e, #252545);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #00f5ff;
      font-weight: bold;
      transition: all 0.3s ease;
    }
    .darktheme .cell:hover {
      background: linear-gradient(145deg, #009ea4, #00a9dc);
      color: #111;
      transform: translateY(-3px) scale(1.05);
      cursor: pointer;
    }
    .darktheme #restart ,.darktheme #reset-scores {
      background-color: #727c8ab6;
      color: white;
    }
    .darktheme #restart:hover , .darktheme #reset-scores:hover  {
      background: linear-gradient(90deg, #00f5ff, #ff00c8);
      color: black;
    }
    
    .game {
      width: 350px;
      text-align: center;
      background-color: #fff;
      margin: auto;
      padding: 30px;
      border-radius: 15px;
    }

    .title{
      background-color:black;
      width: 300px;
      position:relative;
      color:white;
      margin: 5px;
      padding: 8px;
      font-size: 22px;
      font-weight: 600;
      border-radius: 15px;
      text-align: center;
    }
    span{
      color:gold;
    }

    #status {
      height: 25px;
      margin-bottom: 15px;
      font-size: 22px;
      font-weight: 600;
      background-color:gold;
      color:black;
      border-radius: 15px;
    }

    .scoreboard {
      display: flex;
      justify-content: space-around;
      margin: 10px 0;
      padding: 8px;
      background-color: black;
      color: white;
      border-radius: 10px;
    }

    .score {
      font-weight: bold;
    }

    .table{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-gap: 10px;
      justify-content:center ;
    }

    .cell {
      display: flex;
      width: 100px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin: 2px;
      font-size: 50px;
      font-weight: bold;
      background-color:rgb(202, 197, 197);
      border-radius: 15px;
      transition: background-color 0.3s;
    }

    .cell:hover {
      background-color:gold;
      transform: translateY(-3px) scale(1.05);
      cursor: pointer;
    }

    #restart {
      margin-top: 10px;
      padding: 10px 20px;
      background-color:black;
      border: none;
      color: white;
      font-size: 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #reset-scores {
      margin-top: 10px;
      padding: 10px 20px;
      background-color: black;
      border: none;
      color: white;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    #restart:hover ,#reset-scores:hover {
      background-color: rgb(2, 135, 48);
    }
    
    @media (max-width: 480px){
      .title {
        font-size: 24px;
      }

      .cell {
        font-size: 32px;
      }

      #status {
        font-size: 16px;
      }
    }