html {
    cursor:none;
}
#prop_cross {
    display:inline-block;
    width:auto;
    position:fixed;
    z-index:9999;
}
.bull_mark {
    display:inline-block;
    position:fixed;
    width:8px;
    height:8px;
    border:1px dashed black;
    background-color:red;
    border-radius:100%;
    z-index:9;
}
#prop_target{
    display:inline-block;
    width:50px;
    height:50px;
    border-radius:100%;
    position:fixed;
    visibility:hidden;
}
.target_area {
    display:inline-block;
    border-radius:100%;
    border:1px dashed black;
}
.target_area[data-point='c'] {
    width:15px;
    height:15px;
    background-color: yellow;
    position:relative;
    top:calc(50% - 8.5px);
    left:calc(50% - 8.5px);
}
.target_area[data-point='m'] {
    width:35px;
    height:35px;
    background-color: deepskyblue;
    position:relative;
    top:calc(50% - 18.5px);
    left:calc(50% - 18.5px);
}
.target_area[data-point='o'] {
    width:50px;
    height:50px;
    background-color: lightgreen;
}
#menu_cont {
    display:block;
    width:400px;
    height:450px;
    border:1px solid black;
    border-radius:10px;
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    left:calc(50% - 200px);
    top:calc(50% - 225px);
    z-index:999999999;
    cursor:initial;
}
#menu_cont .block {
    display:block;
    position:relative;
    width:auto;
    height:auto;
    background-color:rgba(255, 255, 255, 0.8);
    font-family:Raleway;
    padding: 10px;
    margin:10px;
    border-radius:10px;
}
#menu_cont .block::before {
    display: block;
    width:auto;
    height:20px;
    margin:10px 0;
    font-size:14px;
    font-weight: bold;
    content:attr(data-head);
}
._lbl {
    font-size:12px;
    transition:0.3s linear;
    position:relative;
    left:calc(50% - 50px);
}
._inp {
    padding:10px 5px;
    margin-left: 10px;
    width:250px;
    border:none;
    font-family:Raleway;
    font-size: 16px;
    font-weight:500;
    outline:none;
    background:none;
    transition:0.1s linear;
}
._inp[type='number'] {
    width:50px;
}
._inp[type='number']:hover {
    width:70px;
    background-color:white;
}
._inp.non_empty {
    border-radius: 5px;
    background:linear-gradient(to right, white, rgba(255, 255, 255, 0.7));
}
._lbl.focused {
    font-size:13px;
    font-weight:500;
    left:0;
}
.btn {
    display:block;
    padding:10px 20px;
    min-width:100px;
    font-weight:700;
    cursor:pointer
}
.btn:disabled {
    visibility:hidden
}
.btn#start {
    position:absolute;
    bottom:20px;
    left:calc(50% - 50px);
    background-color:white;
    border:2px solid black;
    border-radius:5px;
    font-family:Raleway;
    font-size:16px;
    color:black;
}
.btn#start:hover {
    background-color:black;
    color:white;
}
#score_card {
    width:250px;
    height:auto;
    position:absolute;
    top:50px;
    right:50px;
    padding:10px;
    background-color:rgba(0, 0, 0, 0.08);
    border-radius:5px;
    min-height:200px;
    visibility: hidden;
}
#score_card span{
    display:block;
    font-family:Raleway;
    font-size:18px;
    margin:10px 0;
    font-weight:bold;
}
#score_card ul{
    display:block;
    font-family:Raleway;
    font-size:14px;
    margin:10px 0;
}
.end_tag{
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    font-family: Raleway;
    font-size:30px;
    font-weight:bold;
    color:red
}
.btn#retry {
    position:absolute;
    top:80px;
    height:50px;
    padding:10px 20px;
    left:calc(50% - 60px);
    background-color:rgb(255, 255, 255);
    border:2px solid lightgreen ;
    border-radius:5px;
    font-family:Raleway;
    font-size:16px;
    color:lightgreen;
    z-index:999999999;
}
.btn#retry:hover {
    background-color:lightgreen;
    color:white;
}
