body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background-color: rgb(242, 214, 214);
      font-family: sans-serif;
}

.game {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: rgb(107, 163, 212);
}

.overallscore {
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
      color: black;
}

.countUpdate {
      display: flex;
}

.name {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 30px;
      padding: 3px;
      color: rgb(185, 99, 231);
      border-bottom: 3px solid rgb(91, 88, 76);
}

.scoreCount {
      display: flex;
      justify-content: center;
      background-color: #efe6e6;
      margin: 0 10px 8px 0;
      border-radius: 1ch;
      padding: 10px 40px;
      font-size: 23px;
      font-weight: 600;
      border: solid 1.5px rgb(237, 108, 108);
}

#squares {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 309px;
      width: 315px;
      padding-bottom: 20px;
}

#Winner {
      color: rgb(54, 54, 51);
      font-size: 20px;
      text-transform: uppercase;
}

.square {
      height: 100px;
      width: 100px;
      border: 2px solid #ffffff;
      background-color: rgb(158, 157, 249);
      font-size: 60px;
      color: rgb(241, 1, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
}

.square:hover {
      background-color: rgb(209, 136, 136);
}

.selectlevel {
      display: flex;
      flex-direction: column;
      background-color: rgb(219, 214, 214);
      height: 75vh;
      width: 40%;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      padding: 20px;
}

.lvl {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 20px;
      background-color: rgb(50, 51, 53);
      margin: 10px;
      cursor: grab;
      color: rgb(234, 173, 18);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      border-radius: 10px;
      border: 1px solid gold;
}

.leveltext {
      display: flex;
      justify-content: center;
      color: rgb(20, 23, 207);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 2px;
      border-bottom: 2px solid rgb(188, 102, 102);
      width: 100%;
      padding-bottom: 10px;
}

.createpopup {
      position: absolute;
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(6, 6, 6, 0.6);
}

.resetgame {
      height: 40px;
      width: 200px;
      border: black 2px solid;
      background-color: black;
      font-size: 25px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      color: gold;
      padding-top: 7px;
}

.lvlselection {
      display: flex;
      margin: 20px;
      padding-bottom: 20px;
}

#textSelectLevel {
      color: red;
}

.element {
      display: flex;
      justify-content: center;
      width: 100%;
}

@media (max-width: 720px) {
      #squares{
            height: 270px;
      }
      .square{
            height: 90px;
            width: 85px;
      }
      .name{
            font-size: 30px;
      }
      .selectlevel {
            height: 60vh;
            width: 80%;
      }
      .leveltext {
            font-size: 22px;
      }
      .countUpdate{
            flex-direction: column;
      }
      .scoreCount{
            font-size: 18px;
      }
}