body {
    font-family: 'Montserrat', sans-serif;
    margin: 0 auto;
    text-align: center;


}


div {
    margin: 10px;

}

h1 {
    margin: 10px;
    font-family: 'Bangers', cursive;

}

main {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;

}

.stats {
    font-weight: bold;
}

table {

    text-align: center;
    border-collapse: collapse;

}

td {
    border-collapse: collapse;
    border: 2px solid black;
    width: 40px;
    height: 40px;
}


#player-ships-stats {
    grid-row: 1/2;
    grid-column: 1/2;
}

#player-table-stat {
    grid-row: 1/2;
    grid-column: 2/3;


}

#computer-table-stat {
    grid-row: 1/2;
    grid-column: 3/4;
}

#computer-ships-stats {
    grid-row: 1/2;
    grid-column: 4/5;
}

#player-ships {
    grid-row: 2/3;
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('/img/battleship-0.png');
    border: 2px solid black;
}

#player-table {
    grid-row: 2/3;
    grid-column: 2/3;
}

#computer-table {
    grid-row: 2/3;
    grid-column: 3/4;
}

#computer-ships {
    grid-row: 2/3;
    grid-column: 4/5;
}



.computer-cell:hover {
    background-color: red;
}

.player-cell:hover {
    background-color: red;
}

#carrier {
    cursor: pointer;
    display: flex;
    flex-direction: row;

}

#battleship {
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

#submarine {
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

#cruiser {
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

#destroyer {
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

#carrier-0 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/carrier-0.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#carrier-1 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/carrier-1.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    width: fit-content;
    transform: rotate(-90deg);
}

#carrier-2 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/carrier-2.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);
}

#carrier-3 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/carrier-3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0;
    transform: rotate(-90deg);
}

#carrier-4 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/carrier-4.png");
    background-repeat: no-repeat;
    background-size: 100% 101%;
    margin: 0;
    transform: rotate(-90deg);
}

#battleship-0 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/battleship-0.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#battleship-1 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/battleship-1.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#battleship-2 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/battleship-2.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#battleship-3 {
    column-width: 45px;
    height: 45px;
    background: url("/img/battleship-3.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#submarine-0 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img//submarine-0.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#submarine-1 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/submarine-1.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#submarine-2 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/submarine-2.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#cruiser-0 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/cruiser-0.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#cruiser-1 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/cruiser-1.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#cruiser-2 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/cruiser-2.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#destroyer-0 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/destroyer-0.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}

#destroyer-1 {
    column-width: 45px;
    height: 45px;
    background-image: url("/img/destroyer-1.png");
    background-repeat: no-repeat;
    background-size: 101% 101%;
    margin: 0;
    transform: rotate(-90deg);

}


.selected {
    background-color: aqua;
}

.disable {
    pointer-events: none;
}

.background-down {
    background-repeat: no-repeat;
    background-size: 101% 101%;


}

.background-right {
    background-repeat: no-repeat;
    background-size: 101% 101%;
    transform: rotate(-90deg);

}


.background-up {
    background-repeat: no-repeat;
    background-size: 101% 101%;
    transform: rotate(-180deg);
}

.background-left {
    background-repeat: no-repeat;
    background-size: 101% 101%;
    transform: rotate(-270deg);

color: darkblue
}


.invisible {
    visibility: hidden;
}
.ship {
    background-color: red;
}

.placed-ship {
    background-color: green;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.darkblue {
    background-color: darkblue;
}

.blue {
    background-color: blue;
}