@import url('https://fonts.googleapis.com/css2?family=Mynerve&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
body{
  height: 100dvh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.board{
  width: 70vmin;
  height: 70vmin;
  background-color: #e0e0e0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  padding: 5vmin;
   webkit-box-shadow: 28px 26px 78px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 28px 26px 78px -16px rgba(0,0,0,0.75);
box-shadow: 28px 26px 78px -16px rgba(0,0,0,0.75);
  position: relative;
}
button:disabled,
button[disabled]{
 
  color: #000000;
}
#t1,#t2,#t3,#t4,#t5,#t6{
  border-bottom: 2px solid black;
}
#t4,#t5,#t6,#t7,#t8,#t9{
  border-top: 2px solid black;
}
#t1,#t4,#t7,#t2,#t5,#t8{
  border-right: 2px solid black;
}
#t2,#t5,#t8,#t3,#t6,#t9{
  border-left: 2px solid black;
}
button{
  border: none;
  background-color: #e0e0e0;
  font-size :2rem;
}
.restart{
 
  height: 7vmin;
  cursor: pointer;
  position: absolute;
  bottom: 40px;
 display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-sizing: content-box;
  font-family: 'Silkscreen', cursive;
}
.restart::after{
  position: absolute;
  content: "";
  width: 110%;
  height: 5px;
  border-radius: 5px;
  bottom: -5px;
  background-color: black;
}
.scoreboard{
  position: absolute;
  top: 10px;
  left: 6px;
  font-size: 20px;
  font-family: 'Silkscreen', cursive;
}
.tiles{
  font-size: 5rem;
  font-family: 'Mynerve', cursive;
}
@media all and (max-width:540px){
 .tiles{font-size: 3rem;} 
}
.onep-twop{
 position: absolute;
    /* top: -100px; */
    /* width: 50%; */
    height: 50px;
    /* left: 25%; */
    display: flex;
    justify-content: center;
    column-gap: 10px;
    top: 120px;
    left: 40px;

}
.twopboard{
  position: absolute;
    top: -100px;
    width: 50%;
    height: 50px;
    left: 25%;
    display: flex;
    justify-content: center;
    column-gap: 10px;
  visibility: hidden;
}
#xturn-oturn{
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: -75%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-family: 'Silkscreen', cursive;
}
#onep{
  height: 100%;
  aspect-ratio: 1/1;
  font-family: 'Silkscreen', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  color: white;
  background-color: black;

}
#twop{
  height: 100%;
  aspect-ratio: 1/1;
  font-family: 'Silkscreen', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  color: black;
  background-color: white;

}
#xturn{
  height: 100%;
  aspect-ratio: 1/1;
  font-family: 'Silkscreen', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  cursor: pointer;
  color: black;
position: relative;
}
#xturn::after{
  width: 0%;
  content: "";
  position: absolute;
  height: 6px;
  bottom: -8px;
  border-radius: 5px;
  background-color: black;
  transition: width .6s;
  right: 0;
}
#xturn.xturn::after{
  width: 100%;
  content: "";
  position: absolute;
 height: 6px;
  bottom: -8px;
  border-radius: 5px;
  background-color: black;
  right: 0;
}
#oturn::after{
  width: 0%;
  content: "";
  position: absolute;
  height: 6px;
  bottom: -8px;
  border-radius: 5px;
  background-color: black;
  transition: width .6s;
  left: 0;
}
#oturn.oturn::after{
  width: 100%;
  content: "";
  position: absolute;
 height: 6px;
  bottom: -8px;
  border-radius: 5px;
  background-color: black;
  left: 0;
}

#oturn{
  height: 100%;
  aspect-ratio: 1/1;
  font-family: 'Silkscreen', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  cursor: pointer;
  color: black;
position: relative;
}
@media screen and (max-width:420px){
  .onep-twop{
    top: 15px;
    right: 25px;
    left: unset;
  }
  .restart::after{
    bottom: -10px;
  }
}
.board::after{
   content: "";
    position: absolute;
    width: 0;
    height: 5px;
  transition: width .5s;
}
.board.board159::after {
    content: "";
    position: absolute;
    width: calc(70%*1.414);
    height: 5px;
     background: #2e2e2e;
    top: 15%;
    left: 15%;
    transform: rotate(45deg);
    transform-origin: left;
    border-radius: 5px;
}
.board.board357::after {
    content: "";
    position: absolute;
    width: calc(70%*1.414);
    height: 5px;
    background: #2e2e2e;
    top: 15%;
    right: 15%;
    transform: rotate(-45deg);
    transform-origin: right;
    border-radius: 5px;
}
.board.board123::after {
    content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    top: 20%;
    left: 15%;
    border-radius: 5px;
}
.board.board789::after {
    content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    bottom: 21%;
    left: 15%;
    border-radius: 5px;
}
.board.board147::after {
    content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    top: 15%;
    left: 21%;
    border-radius: 5px;
    transform: rotate(90deg);
    transform-origin: left;
}
.board.board369::after {
    content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    top: 15%;
    right: 22%;
    border-radius: 5px;
    transform: rotate(-90deg);
    transform-origin: right;
}
.board.board456::after {
    content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    top: 49%;
    left: 15%;
    border-radius: 5px;
}
.board.board258::after {
   content: "";
    position: absolute;
    width: calc(70%);
    height: 5px;
    background: #2e2e2e;
    left: 50%;
    top: 15%;
    border-radius: 5px;
    transform: rotate(90deg);
    transform-origin: left;
}