#mainContainer {
    width: 99vw;
    height: 99vh;

    /* flexbox */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 175px;
    flex-direction: row;

    /* centre div */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*#region UI */
#randomButton {
    border-radius: 5px;
    padding: 8.5px 13.5px;

    font-size: 17px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-115%, 650%);
}

#setButton {
    border-radius: 5px;
    padding: 8.5px 13.5px;

    font-size: 17px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(15%, 650%);
}
/*#endregion*/

/*#region Board */
.boardContainer {
    width: 450px; 
    height: 450px;

    background-color:#1a1a1a;
}

.board {
    width: 100%;
    height: 100%;

    background-color: #1a1a1a; 

    margin: 0 auto;
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(10, 1fr);
}
/*#endregion*/

/*#region Tiles */
.gridTile {
    width: 45px;
    height: 45px;

    position: relative;
    padding: 0;
    margin: 0;

    /* overflow: hidden; */
    justify-content: center;
    align-items: center;

    box-sizing: border-box; 
    border: solid 1px #1a1a1a;
    background-color: #333333;
}

.gridTileHover {
    background-color: #444444;
}

.checkedTile {
    background-color: #1a1a1a; 
}

.boatTile {
    width: 45px;
    height: 45px;

    position: relative;
    padding: 0;
    margin: 0;

    overflow: hidden;

    box-sizing: border-box; 
    border: solid 1px #1a1a1a;
    background-color: transparent;
}

.boatTopTile {
    border-radius: 20px 20px 0 0;
}

.boatBottomTile {
    border-radius: 0 0 20px 20px;
}

.boatRightTile {
    border-radius: 0 20px 20px 0;
}

.boatLeftTile {
    border-radius: 20px 0 0 20px;
}
/*#endregion*/

/*#region Hit symbols */
/*#region Hit */
.hitMark {
    width: 70%;
    height: 4px;

    /* centre div */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hitMark:before, .hitMark:after {
    content: '';
    width: 100%;
    height: 4px;
    background-color: #c91847;
    position: absolute;
}

.hitMark:before {
    transform: rotate(45deg);
}

.hitMark:after {
    transform: rotate(-45deg);
}
/*#endregion*/

/*#region Miss */
.missMark {
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #444444;

    /* centre div */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*#endregion*/

/*#region Sunk */
.sunkMark {
    width: 75%;
    height: 75%;

    /* centre div */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*#endregion*/
/*#endregion*/

/*#region Effects */
/* splash animation */
@keyframes growFade {
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(2.5);}
}

.splashEffect {
    width: 25px;
    height: 25px;

    background-color: #444444;
    border-radius: 50%;

    z-index: 99;
    pointer-events: none; /* this allows clicks to pass through */
    opacity: 0;

    position: absolute;

    /* animation */
    animation-name: growFade;
    animation-duration: 0.5s;
}
/*#endregion*/

/*#region Mobile changes */
@media (max-width: 768px) {
    #mainContainer {
        flex-direction: column;
        gap: 30px
    }

    .boardContainer {
        width: 60vw;
        height: 60vw;
        margin: 10% 0;

        transform: translateY(10%);
    }

    /*#region Tile */
    .gridTile {
        width: 6vw;
        height: 6vw;
    }

    .boatTile {
        width: 6vw;
        height: 6vw;
    }
    /*#endregion */

    /*#region Marks and effect */
    .hitMark, .hitMark:before, .hitMark:after {
        height: 2px;
    }

    .missMark {
        width: 1.5vw;
        height: 1.5vw;
    }
    /*#endregion*/
}