body{
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
}
/*p{
    margin: 5px;
    padding: 5px;
}*/
h1{
  align-items: center;  
  margin: 0px;
  padding: 0px;
  font-size: 80px;
  font-family: 'Righteous', cursive;
}
#titleTTT{
    display: flex;
    flex-direction: row;
    margin: 0px;
}
#Tic, #Tac, #Toe{
    padding: 0px;
    margin: 0px;
}
#Tac{
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
#Toe{
    padding-top: 30px;
}
h3{
    align-items: center;
    margin: 0px;
    padding: 0px;
}
#playerSection{
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: bolder;
    margin: 0px;
    margin-bottom: 25px;
    height: 20px;
}
.littleBlank{
    width: 5px;
}
#winnerSection{
    color: red;
    font-weight: bolder;
    font-size: 40px;
}
#blank{
    width: 50px;
}
#gameboard{
    display: grid;
    font-size: 50px;
    font-weight: bolder;
    grid-template-columns: 1fr, minmax(0, 400px), minmax(0, 400px), minmax(0, 400px), 1fr;
    grid-template-rows: 1fr, minmax(0, 400px), minmax(0, 400px), minmax(0, 400px), 1fr;
}
.form-popup{
    display: none;
    position: fixed;
    border: 3px solid grey;
    z-index: 9;
}
button{
    background-color:#cef5f0;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 10px 5px 5px grey;
}
.form-container{
    max-width: 600px;
    padding: 25px;
    background-color: lightblue;
}
.form-container input[type=text]{
    background-color: #ddd;
    outline: none;
    font-size: 24px;
}
li{
    list-style: none;
    padding: 8px;
}
#row0{
    grid-column: 2/5;
    grid-row: 2/3;
    display: flex;
    flex-direction:row;
}
.square{
    height: 120px;
    width: 120px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}
#square0{
    border-right: purple 5px solid;
    border-bottom: purple 5px solid;
    margin-top: 25px;
}
#square1{
    border-left: purple 5px solid;
    border-right: purple 5px solid;
    border-bottom: purple 5px solid;
    margin-top: 25px;
}
#square2{
    border-left: purple 5px solid;
    border-bottom: purple 5px solid;
    margin-top: 25px;
}
#row1{
    grid-column: 2/5;
    grid-row: 3/4;
    display: flex;
    flex-direction:row;
}
#square3{
    border-right: purple 5px solid;
    border-top: purple 5px solid;
    border-bottom: purple 5px solid;
}
#square4{
    border: purple 5px solid;
}
#square5{
    border-left: purple 5px solid;
    border-top: purple 5px solid;
    border-bottom: purple 5px solid;
}
#row2{
    grid-column: 2/5;
    grid-row: 4/5;
    display: flex;
    flex-direction:row;
}
#square6{
    border-right: purple 5px solid;
    border-top: purple 5px solid;
}
#square7{
    border-left: purple 5px solid;
    border-right: purple 5px solid;
    border-top: purple 5px solid;
}
#square8{
    border-left: purple 5px solid;
    border-top: purple 5px solid;
}
#reset-board-button{
    margin: 20px;
    margin-top: 35px;
    border-radius: 10px;
    font-size: 15px;
    padding: 8px;
}