*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

:root{
    --bg-color: #c58bfa;
    --item-color: #d2691e;
}

.container{
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-color);
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    gap: 6px;
    justify-content: center;
    align-content: center;
}

.box{
    background-color: var(--item-color);
    border: 3px double blue;
    border-radius: 16px;
    color: red;
    font-size: 66px;
    text-shadow: 0px 0px 6px white;
}

.resetbtn{
    font-size: 28px;
    width: 128px;
    border-radius: 16px;
    border: 3px dotted black;
    background-color: black;
    color: white;
    border-color: red;
    cursor: pointer;
}

.toe{
    position: absolute;
    left: 566px;
    top: 66px;
    width: 228px;
    text-align: center;
    color: var(--item-color);
    border: 3px dotted black;
    border-color: var(--item-color);
    border-radius: 8px;
}

h1{
    /* background-color: white; */
    color: red;
    position: absolute;
    left: 538px;
    top: 50px;
    height: 38px;
    width: 300px;
    text-align: center;
    font-size: 56px;
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: blue;
    text-decoration-thickness: 3px;
}
p{
    background-color: blue;
    color: red;
    position: absolute;
    left: 388px;
    top: 166px;
    height: 23px;
    width: 200px;
    text-align: center;
    font-size: 88px;
    border-radius: 60px;
    border-bottom-left-radius: 288px;
    border-bottom-right-radius: 328px;
    border: 3px solid black;
    border-color: white;
    border-style: double;
}

/* p::{
    content: 'o';
    color: blue;
} */

.hide{
    display: none;
}

.newgame{
    font-size: 28px;
    width: 156px;
    border-radius: 16px;
    border: 3px dotted black;
    background-color: black;
    color: white;
    border-color: red;
    cursor: pointer;
    position: absolute;
    left: 600px;
    top: 388px;
}

.game-is-hide{
    visibility: hidden;
}

.msg{
    font-weight: 900;
    height: 300px;
    width: 600px;
}