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

h1 {
    color: white;
    margin-right: 5px;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18, 2px 2px 2px rgba(255,23,23,0), 2px 2px 2px rgba(255,23,23,0);
}



nav {
   height: 12rem;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: black;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(77, 77, 77);

}

button {
    height: 2rem;
    width: 8rem;
    border-radius: 10px;
    border: 2px solid rgb(155, 155, 155);
    cursor: crosshair;
}



#board-container {
    display: flex;
    width: auto;
}

#info {
    display: flex;
    position: relative;
    background-color: black;
    color: white;
    width: 20rem;
    height: 16rem;
    top: 9rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    border-radius: 10px;
    border: 3px solid rgb(155, 155, 155);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}


#player-board, #cpu-board {
    display: grid;
    justify-content: center;
    align-items: center;
    height:26rem;
    width: 26rem;
    border: 1.5px solid rgb(155, 155, 155);
    background-clip: padding-box;
    aspect-ratio: 1/1;
    grid-template-columns: repeat(10, 1fr);
    margin: 4rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    cursor: crosshair;

}
.cell {
    display: flex;
    aspect-ratio: 1/1;
    border: 1.5px solid rgb(103, 103, 103);
    background-color: blue;
    background-clip: padding-box;
   
}

.ship {
background: #0f0f0f;
background: radial-gradient(circle,rgba(15, 15, 15, 1) 37%, rgba(110, 113, 128, 1) 48%, rgba(0, 0, 0, 0.3) 60%);
}

.hit {
background: #ff0000;
background: radial-gradient(circle,rgba(255, 0, 0, 1) 37%, rgba(125, 51, 51, 1) 50%, rgba(255, 0, 0, 0.3) 60%);

}

.miss {
background: #f7f2f2;
background: radial-gradient(circle,rgba(247, 242, 242, 1) 37%, rgba(14, 101, 232, 1) 48%, rgba(4, 0, 255, 0.3) 60%);
}