html{
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height:100vh;

}




.start{

flex-direction: column;
    display:flex;
align-items:center;
justify-content:space-between;
width:100vw;
height:95vh;
overflow: hidden;

}
body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
flex-direction: column;
    display:flex;
align-items:center;
justify-content:space-between;
width:100vw;
height:95vh;
overflow: hidden;
margin:0;
background-color: rgb(26, 36, 64);
}

.top{
width: 22rem;
height:25%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.bottom{
width: 22rem;
height:25%;
display: flex;
align-items: center;
justify-content:center;
}
.start-game{
width: 22rem;

display: flex;
align-items: center;
justify-content:center;
}
.start-game p{

font-weight: 700;
}
.start-game button{
border: none;
width: 22rem;
height:3rem;
border-radius:1rem;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 0.4rem rgb(99, 109, 116);
transition: 0.2s ease;
}
.start-game button:hover{
background-color: rgb(161, 166, 171);
cursor: pointer;


}
.score{
width: 22rem;
height: 50%;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.dscore{
background-color: rgba(68, 75, 96, 0.859);
width: 9rem;
height: 5rem;
border-radius:0.6rem ;
border:1px solid rgb(136, 134, 134,0.8)
}
.ssymbol{
width: 100%;
height:60%;
display: flex;
align-items: center;
justify-content: center;
}
.ssymbol div{
width: 90%;
font-size: 2rem!important;

}
.fix{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scoreboard{
display: flex;
height: 100%;
width: 90%;
align-items: center;
justify-content: space-between;
font-size: 1.5rem;
color: aliceblue;
font-weight: 780;
}


h3{
margin: 0;
font-size: 1.7rem;
color: aliceblue;
font-weight: 780;
}
.heading{
display: flex;
align-items:flex-end;
justify-content: center;
width: 22rem;
height: 30%;


}

.main{
display:flex;
align-items:center;
justify-content:center;
width: 22rem;
height:22rem;
background-color: rgba(68, 75, 96, 0.859);
flex-direction: column;
border-radius: 1rem;
}

.row2,.row3,.row1{
display:flex;
flex-direction: row;
width: 21.56rem;
height: 7.04rem;
justify-content: space-evenly;
align-items: center;
}

.box{
display: flex;
width: 6.3rem;
height:6.3rem;
background-color: rgb(26, 36, 64);
border-radius: 1rem;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 4rem;
}
[data-piece="circle"]{
display: flex;
align-items: center;
color: rgb(250, 138, 126);


}
[data-piece="cross"]{
display: flex;
align-items: center;
color: rgb(77, 120, 57);


}

.result{
display: flex;
align-items: center;
justify-content: center;
width: 22rem;
height: 95rem;
}
.win{
display: flex;
align-items:center;
justify-content:center;
width: 22rem;
height: 18vh;
flex-direction: column;
font-size: 4rem;
}
.arrow{
font-size: 2rem;
font-weight: 800;
}
#cross_win{
    font-weight: 700;
color:antiquewhite;


}
#sign-cross{
    font-size:6rem;
    color: rgb(108, 182, 78);
}
#circle_win{
font-weight:700;
color:antiquewhite;
}
#sign-circle{
font-size:6rem;
    color: rgb(250, 138, 126);
}

.draw{
display: flex;
align-items:center;
justify-content:center;
width: 22rem;
height: 18vh;
flex-direction: column;
font-size: 4rem;
font-weight:700;
color:antiquewhite;
}
#draw-fix{
width: 22rem;
display: flex;
justify-content: center;
align-items: center;
}
#sign-draw{
    width: 15rem;
    height: 8rem;
display:flex ;
flex-direction: row;
align-items: center;
justify-content: center;


}