@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap'); 
body {
    background: linear-gradient( rgb(0, 128, 255), transparent 1px), linear-gradient( 90deg, rgb(118, 149, 179), transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    height: 100%;
    margin: 0;
    font-family: 'Comfortaa';
    position: relative;
    cursor: pointer;
}
.game{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.game_field_1,.game_field_2{
    width: 200px;
    height: 200px;
    border: solid 1px;
    border-radius: 1px;
    margin:50px;
    margin-top: 30px;
}
.game_field_1,.game_field_2{
   margin:0;
   position: relative;
}
.ships_container_1 ,.ships_container_2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 200px;
    height: auto;
    margin-top:20px;

}
.ships_container_1 div,.ships_container_2 div{
    background-color:rgb(80, 67, 204);
    width:20px;
    position: absolute;
    
}
.info_bar{
    position: absolute;
    left:80%;
    top:-96%;
    display: flex;
    align-items: center;
}
li{
    list-style-type:square;
    display: block;
    margin-bottom: 20px;
    cursor:pointer;
}
.ship_4{
    height: 80px;
}
.ship_3{
    height: 60px;
}
.ship_2{
    height: 40px;
}
.ship_1{
    height: 20px;
}
.verbs{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}
.verbs span{
    display: block;
    height: 20px;
    width: 20px;
}
.pole_in_pole{
    display: flex;
}
.pole_container_1,.pole_container_2{
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    margin-right: 25px;
    margin-top: 4px;
}
.numbers{
    display: flex;
    margin-left: 25px;;
}
.numbers span{
    display: block;
    width: 20px;
    height: 20px;;
}
.menu{
    display: flex;
    flex-direction: column;
    position:absolute;
    left:50%;
    top:50%;
}
.menu button{
    width: 300px;
    height: 100px;
    margin-bottom: 50px;
    border:solid rgb(119, 156, 180) 5px;
    border-radius: 50px;
    background-color: rgb(181, 225, 255);
    font-family: 'Comfortaa';
    font-size: 28px;
}
.button_scale {
    -webkit-transform: scale(0.94);
     transform: scale(0.94);
 }
 .field_icons{
     display:flex;
     width: 20px;
     height: 20px;
     position: absolute;
     align-items: center;
     justify-content: center;

 }
 .red_cross , .grey_cross{
     font-size: 18px;
 }
 .dot{
     font-size: 40px;
 }
 .red_cross{
     color:red;
 }
 .ready{
     margin-left:50px;
     height: 30px;
     border-radius: 30px;
     border:solid rgb(119, 156, 180) 5px;
     border-radius: 50px;
     background-color: rgb(181, 225, 255);
     font-family: 'Comfortaa';
     font-size: 16px;
 }