* {
   box-sizing: border-box;
   font-family: sans-serif;
}

html,
body {
   height: 100%;
}

body {
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 50px;
   gap: 50px;
   flex-direction: column;
}

.information,
.choose-players {
   background: rgb(17, 17, 24);
   border: 1px solid #0ff;
   color: rgb(53, 231, 133);
   animation: light-up 1s infinite alternate;
   display: flex;
   flex-direction: column;
   align-items: center;
}

button {
   background: #000;
   color: #0ff;
   border: 1px solid #0ff;
   padding: 5px 40px;
   font-size: 1.5rem;
   cursor: pointer;
   transition: 0.2s;
}

button:hover {
   background: #0ff;
   outline: none;
   color: #000;
   box-shadow: 0 0 10px 5px #0ff;
}

button:focus {
   outline: none;
   box-shadow: 0 0 10px 5px #0ff;
}

#information-fade-out,
#choose-opponent-fade-out {
   animation: fade-out 1s;
   display: flex;
}

/* TODO choose players section */
.choose-players {
   height: 350px;
   width: 300px;
   display: flex;
}

.choose-players button {
   width: 200px;
}

.buttons {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   padding-top: 40px;
   gap: 50px;
}

/* TODO information */
.information {
   height: 350px;
   width: 300px;
   padding-top: 20px;
   text-transform: uppercase;
   font-size: 1.2rem;
   display: none;
}

#information-fade-in {
   animation: fade-in 1s;
   display: flex;
}

label {
   margin-bottom: 10px;
}

input {
   border: none;
   background: rgb(32, 42, 48);
   color: rgb(146, 201, 252);
   caret-color: #0ff;
   padding: 6px;
}

input:focus {
   outline: 1px solid #0ff;
}

input#first-player {
   margin-bottom: 50px;
}

input#second-player {
   margin-bottom: 85px;
}

@keyframes fade-out {
   from {
      opacity: 1;
   }
   to {
      opacity: 0;
   }
}

/* TODO Gameboard */
.gameboard {
   height: 600px;
   width: 600px;
   display: none;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

#gameboard-fade-in {
   animation: fade-in 1s;
   display: grid;
   flex-shrink: 0;
}

.square {
   border: 2px solid #0ff;
   color: rgb(53, 231, 133);
   text-shadow: 0 0 20px rgb(53, 231, 133);
   box-shadow: 0 0 10px 5px #0ff;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 9rem;
   user-select: none;
}

.x {
   color: rgb(0, 195, 255);
   text-shadow: 0 0 20px rgb(0, 195, 255);
}

.winning-line {
   color: #ffa500;
   text-shadow: 0 0 20px #ffa500;
}

@keyframes light-up {
   0% {
      box-shadow: 0 0 10px 0px #0ff;
      text-shadow: 0 0 0px rgb(53, 231, 133);
   }
   100% {
      box-shadow: 0 0 10px 5px #0ff;
      text-shadow: 0 0 20px rgb(53, 231, 133);
   }
}

@keyframes light-up-x {
   0% {
      text-shadow: 0 0 0px rgb(0, 195, 255);
   }
   100% {
      text-shadow: 0 0 20px rgb(0, 195, 255);
   }
}

@keyframes fade-in {
   from {
      opacity: 0;
      display: flex;
   }
   to {
      opacity: 1;
   }
}

/* TODO Player Information */
.players-info {
   color: #fff;
   display: none;
   justify-content: center;
   width: 100%;
   text-transform: uppercase;
}

#players-info-fade-in {
   animation: fade-in 1s;
   display: flex;
}

.players-info > * {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
   width: 400px;
   gap: 10px;
   color: rgb(7, 233, 109);
   animation: lighten-player 2s infinite alternate;
}

.starter-player {
   color: rgb(0, 195, 255);
   animation: lighten-starter-player 2s infinite alternate;
}

.name {
   font-size: 2.5rem;
}

.score {
   font-size: 2.5rem;
   font-weight: bold;
}

.seperator-line {
   width: 2px;
   height: 200px;
   background: #fff;
   background: rgb(244, 247, 43);
   animation: lighten-seperator-line 2s infinite alternate;
}

@keyframes lighten-player {
   from {
      text-shadow: 0 0 0px rgb(7, 233, 109);
   }
   to {
      text-shadow: 0 0 20px rgb(7, 233, 109);
   }
}

@keyframes lighten-starter-player {
   from {
      text-shadow: 0 0 0px rgb(0, 195, 255);
   }
   to {
      text-shadow: 0 0 20px rgb(0, 195, 255);
   }
}

@keyframes lighten-seperator-line {
   from {
      box-shadow: 0 0 10px 0px rgb(244, 247, 43);
   }
   to {
      box-shadow: 0 0 10px 5px rgb(244, 247, 43);
   }
}