body {
  background-color: #161f29;
  color: #fff;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.border {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1vh;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0;
}

.title > p {
  margin: 0;
  padding: 0;
  font-size: 1vh;
  color: #3f4046;
}

h1 {
  font-size: 7vh;
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 20vw);
  grid-template-rows: repeat(3, 20vh);
  border-radius: 1%;
  border: 1vh solid #2c3e50;
}

.pos {
  background-color: #34495e;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1vh solid #2c3e50;
  border-radius: 1%;
  font-size: 15vh;
}

.X {
  color: red;
}

.O {
  color: blue;
}

.score-board {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  border: 0.5vh solid #2c3e50;
}

.status {
}
.status > button {
  background-color: #2c3e50;
  border: none;
  padding: 0.8vh 0.8vw;
}

.score-board > p {
  padding: 1vh 1vw;
  margin: 0;
  border: 0.3vh solid #2c3e50;
  background-color: #2c3e50;
}

.score {
  display: grid;
  grid-template-columns: 5vw 50vw 5vw;
  border: 0.3vh solid #2c3e50;
  align-items: center;
  margin: 0;
  padding: 1vh 0;
}

.playing {
  background-color: #2c3e50;
  border-color: #33ff00;
}

.winner {
  background-color: #b3ebca;
  border-color: #33ff00;
}

.no-winner {
  background-color: rgb(255, 131, 131);
  border-color: rgb(255, 0, 0);
  color: #000;
}

.winner-score {
  background-color: #b3ebca;
  border-color: #33ff00;
  color: #161f29;
}

.loose {
  background-color: #34495e;
  border-color: #2c3e50;
}

.options {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.options > label {
  width: 20vh;
}
.options > select {
  width: calc(100% - 20vh);
  background-color: #34495e;
  color: #fff;
  font-weight: 400;
  border: 0;
  padding: 1vh;
  text-align: center;
}