*, *::after, *::before {
  box-sizing:border-box;
}

:root{
  --cell-size: 100px;
  --mark-size calc(var(--cell-size) * .9);
}

body {
  margin:0;
}

.tttheader{
  width:100% !important;
  text-align:center;
}


.board{
  width: 100%;
  min-width:350px;
  min-height:350px;
  height: 60vh;
  display:grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  background-color:burlywood;
  grid-template-columns: repeat(3, auto);
  margin-bottom:50px;
}

.cell {
  width: 100px;
  height: 100px;
  border: 1px black;
  display:flex;
  justify-content: center;
  align-items: center;
  position:relative;
  background-color:white;
  margin:1px;
  cursor:pointer;
}

.cell: first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
  border-top:none;
}

.cell:nth-child (3n+1){
  border-right:none;
}

.cell:nth-child (3n+3){
  border-right:none;
}

.cell:last-child,
.cell:nth-child(7),
.cell:nth-child(8){
 border-top:none; 
}

.cell.x::before,
.cell.x::after{
  content: '';
  position: absolute;
  width: 13.5px;
  height: 90px;
  background-color: black;
}

.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after{
  content: '';
  position: absolute;
  width: 13.5px;
  height: 90px;
}

.cell.x::before,
.board.x .cell:not(.x):not(.circle):hover::before{
   transform: rotate(45deg);
}

.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::after{
   transform: rotate(-45deg);
}


.cell.x,
.cell.circle {
  cursor: not-allowed;
}


.cell.circle::before,
.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::before,
.board.circle .cell:not(.x):not(.circle):hover::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: black;
}

.cell.circle::before,
.board.circle .cell:not(.x):not(.circle):hover::before{
width: 90px;
height: 90px;
}

.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::after{
width: 63px;
height: 63px;
background-color:white;
}

.winning-message{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  min-width:350px;
  background-color: rgba(0,0,0, .9);
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 5rem;
  flex-direction: column;
}

.winning-message button{
font-size: 3rem;
  background-color: white;
  border: 1px black;
  padding .25em .5em;
  cursor: pointer;
  color:black;
}

.winning-message button:hover {
  background-color: black;
  color:white;
  border-color:white;
}

.winning-message.show{
display:flex;
}


.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after,
.board.circle .cell:not(.x):not(.circle):hover::before{
 background-color: lightgrey;
}

.proj_desc{
  float:left;
  margin: 20px 50px;
}