*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Montserrat', sans-serif;
    font-weight:600; 
    min-height:100vh;
    margin:0px;
}
header{
    display:none;
    justify-content:space-between;
    opacity:1;
}
#score_disp div{
    border:2px solid black;
    margin:8px;
}
#score_disp p{
    margin:0 8px;
    text-align:center;
}
#score_disp div:nth-child(1) p:nth-child(1)
{
    color:blue;
}
#score_disp div:nth-child(2) p:nth-child(1)
{
    color:gray;
    font-size: 2vw;
    padding-bottom: 0.2vw;
}
#score_disp div:nth-child(3) p:nth-child(1)
{
    color:red;
}
#score_disp{
    display:flex;
    font-size:2.3vw;
}
#grid_box{
    display:grid;
    grid-template-columns:auto auto auto;
    margin :auto;
    align-content: center;
    justify-content:center;
}
.Oxgrid{
    border-width:4px;
    border-style :solid;
    border-top:none;
    border-left:none;
    display:flex;
    align-items:center;
    justify-content:center;
}
.Oxgrid:nth-child(1)
{
    border-bottom-color:black;
    border-right-color: black;
}
.Oxgrid:nth-child(2)
{
    border-bottom-color:black;
    border-right-color: black;
}
.Oxgrid:nth-child(3)
{
    border-bottom-color: black;
    border-right:none;
}
.Oxgrid:nth-child(4)
{
    border-bottom-color:black;
    border-right-color: black;
}
.Oxgrid:nth-child(5)
{
    border-bottom-color:black;
    border-right-color: black;

}
.Oxgrid:nth-child(6)
{
    border-bottom-color: black;
    border-right:none;

}
.Oxgrid:nth-child(7)
{
    border-right-color: black;
    border-bottom:none;
    
}
.Oxgrid:nth-child(8)
{
    border-right-color: black;
    border-bottom:none;
}
.Oxgrid:nth-child(9)
{
    border-right:none;
    border-bottom:none;
}
#ani_text{
    width:100vw;
    height:100vh;
    display:grid;
    font-weight:700;
    font-size:70px;
    align-content:center;
    text-align:center;
    position:absolute;
    color:rgb(45,45,45);
}
.instruct_ng{
    width:100vw;
    font-size:22px;
    position:absolute;
    text-align:center;
    color:#9905ff;
    top:62vh;
    animation-name:inc_dec;
    animation-duration:1.25s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
}
@keyframes inc_dec
{
    from{
        font-size:15px;
        opacity:0.3;
    }
    to{
        font-size:20px;
        opacity:1;
    }
}
.click_css{
    width:100vw;
    font-size:22px;
    position:absolute;
    text-align:center;
    color:#9905ff;
    top:62vh;
    animation-name:click_burst_ani;
    animation-duration:2s;
    font-size:0px;
    opacity:0;
}
@keyframes click_burst_ani
{
    from{
        font-size:20px;
        opacity:1;
    }
    to{
        font-size:26px;
        opacity:0;
    }
}
.removal{
    animation-name:removal;
    animation-duration:2s;
    animation-delay:300ms;
}
@keyframes removal{
    from{
        opacity:1;
        font-size:70px;
    }
    to{
        opacity:0;
        font-size:82px;
    }
}
@media screen and (max-width:590px)
{
    #ani_text{
        font-size:50px;
    }
    @keyframes removal{
        from{
            opacity:1;
            font-size:50px;
        }
        to{
            opacity:0;
            font-size:60px;
        }
    }
    .instruct_ng{
        font-size:19px;
    }
    @keyframes inc_dec{
        from{
            font-size:14px;
        }
        to{
            font-size:19px;
        }
    }
    .click_css{
        font-size:19px;
    }
    @keyframes click_burst_ani
    {
        from{
            font-size:19px;
            opacity:1;
        }
        to{
            font-size:23px;
            opacity:0;
        }
    }
}

@media screen and (max-width:430px)
{
    #ani_text{
        font-size:40px;
    }
    @keyframes removal{
        from{
            opacity:1;
            font-size:40px;
        }
        to{
            opacity:0;
            font-size:45px;
        }
    }
    .instruct_ng{
        font-size:16px;
    }
    .click_css{
    font-size:16px;
    }
    @keyframes click_burst_ani
    {
        from{
            font-size:14px;
            opacity:1;
        }
        to{
            font-size:18px;
            opacity:0;
        }
    }
    @keyframes inc_dec{
        from{
            font-size:10px;
        }
        to{
            font-size:14px;
        }
    }
}
.grd_intro{
    animation-name:grd_intro;
    animation-duration:2s;
}
@keyframes grd_intro{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
.O_or_X
{
    text-align:center;
    animation-name:char_appearence;
    animation-duration:200ms;
}
.zero
{
    color:blue;
}
.cross
{
    color:red;
}
#result{
    text-align:center;
    font-size:30px;
}
.result_cls{
    animation-name:grd_intro;/*This animation is for opacity 0 to opacity 1*/
    animation-duration:400ms;
}
#cutting_line{
    height:3px;
    visibility:hidden;
    position:absolute;
}
#retry_bttn{
    width:50px;
    transition-property: width;
    transition-duration: 300ms;
    opacity:0.8;
}
#retry{
    width:65px; 
}
#mute{
    width:55px;
}
#retry_bttn:hover{
    width:60px;
    opacity:1;
}
#sound_bttn{
    width:50px;
    transition-property: width;
    transition-duration: 300ms;
    opacity:0.8;
}
#sound_bttn:hover{
    width:60px;
    opacity:1;
}
#mute_bttn{
    width:40px;
    transition-property: width;
    transition-duration: 300ms;
    position:absolute;
    opacity:0.8;
}
#mute_bttn:hover{
    width:48px;
    opacity:1;
}
#retry_nd_sound{
    justify-content:end;
    margin-top:10px;
    height:90px;
}
.retry_nd_sound_ani
{
    animation-name:grd_intro;
    animation-duration:2s;
}
a{
    position:absolute;
    right:0px;
    font-size:10px;
    display:none;
}
#cursor_char
{
    position:absolute;
    height:100px;
}
.cutting_ani_cls
{
    animation-name:cutting_ani;
    animation-duration:200ms;
    animation-timing-function:linear;
}
#grid_nd_cut_line{
    margin-bottom:5vh;
}
@media screen and (max-width:730px){
    #score_disp{
        height:60px;
        font-size: 16.79px;
    }
    #score_disp div:nth-child(2) p:nth-child(1){
        font-size:14.6px;
    }
}
@media screen and (max-width:500px)
{
    #sound_bttn, #retry_bttn, #mute_bttn{ 
        width:auto;
    }
    #sound_bttn, #mute_bttn{
        height:8vw;
    }
    #retry_bttn{
        height:9.5vw;
    }
    #retry_nd_sound{
        width:24vw;
    }
}