@import url("https://fonts.googleapis.com/css2?family=Eater&display=swap");
* {
   margin: 0px;
   padding: 0;
   box-sizing: border-box;
   font-family: "Eater";
   color: rgb(255, 133, 133);
   letter-spacing: 5px;
}

:root {
   --body-color: rgb(80, 12, 12);
   --header-color: rgb(69, 11, 11);
}

body {
   height: 100vh;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: rgb(103, 14, 14);
}

header {
   width: 100%;
   padding: 15px;
   text-align: center;
   font-size: 30px;
   margin-bottom: 25px;
   background-color: var(--header-color);
}

.tictac {
   display: flex;
   justify-content: space-between;
   gap: 30px;
}

.container {
   border-radius: 20px;
   height: 550px;
   width: 600px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
}

.container > button {
   border-radius: 5px;
   border: 1px solid rgb(76, 13, 13);
   background-color: brown;
   font-size: 50px;
   cursor: pointer;
   transition: transform 0.1s ease-in-out, translateY 0.1s ease-in-out,
      background-color 0.1s ease-in-out;
}

.container > button:hover,
.restart:hover {
   background-color: rgb(212, 74, 74);
}

.container > button:active,
.restart:active,
.addPlayer:active {
   background-color: rgb(140, 40, 40);
   transform: scale(0.92) translateY(0.2em);
}

.sec-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.active-player {
   margin: 20px;
   padding: 10px;
   border-radius: 10px;
   text-align: center;
   background-color: var(--header-color);
}

.score {
   height: 250px;
   width: 350px;
   background-color: rgb(194, 194, 194);
   border-radius: 10px;
   padding: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   background-color: var(--header-color);
}

.winner {
   font-size: 30px;
   text-align: center;
}

.scores {
   font-size: 20px;
}

.restart {
   height: 70px;
   width: 150px;
   margin: 20px;
   background-color: var(--header-color);
   border: 1px solid rgb(69, 16, 16);
   border-radius: 4px;
   letter-spacing: 2px;
}

.restart:hover {
   background-color: rgb(138, 12, 12);
}

dialog {
   background-color: var(--header-color);
   color: white;
   border-radius: 20px;
   border: 0;
   margin: 15% auto;
   height: 62%;
   width: 30%;
}

dialog > * {
   font-size: 20px;
}

dialog::backdrop {
   background-color: var(--body-color);
}

dialog > header > h2 {
   padding: 20px 20px 5px;
   text-align: center;
   border-bottom: 2px solid red;
}

.dialog-content {
   height: 55%;
   padding: 15px;
}

#player1,
#player2 {
   width: 100%;
   height: 25px;
   margin-bottom: 30px;
   border-radius: 10px;
   outline: none;
   padding: 0 10px;
}

#player1:focus,
#player2:focus {
   border: 2px solid rgb(240, 217, 217);
   outline: none;
}

form > button {
   display: block;
   margin: 0 auto;
   padding: 20px;
   border-radius: 10px;
   border: 1px solid rgb(107, 68, 0);
   cursor: pointer;
}

form > button:hover {
   background-color: rgb(190, 93, 93);
}