* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', arial, sans-serif;
    background-color: azure;
}

#content{
    display: grid;
    grid-template: 1fr 1fr;

    justify-items: center; 
    
    gap: 1em;
    padding: 1em;

    min-width: fit-content;
    max-width: 3000px;
    margin: auto;
}




.header{
    grid-column: span 2;
    font-size: 4em;
    font-weight: 900;
    padding-bottom: .5em;
}

.label{
    color: green;
    font-size: 1.5em;
    width:fit-content
}

.grid{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border: .3em solid darkgreen
}

.cell{
    border: 1px dashed gray;
    background-color: lightblue;
    height: 3em;
    width: 3em;
}

.footer{
    color: purple;
    font-size: 2em;
    grid-column: span 2;
    padding-top: 1em;
}

button{
    color: white;
    background-color: purple;
    border: none;
    padding: .5em 1em;
    font-weight: 900;
    font-size: .8em;

    margin-left: 1em;
}


.ship{
    background-color: lightgreen;
}

.hover{
    cursor: crosshair;
}

.hover_consider_invalid{
    background-color: pink;
    background-image: url("images/invalid.png");
    background-size: contain;
    cursor: not-allowed;
}

.hover_consider_valid{
    background-color: lightseagreen;
    cursor: grab;
}

.miss{
    background-color: skyblue;
    background-image: url("images/splash.png");
    background-size: contain;
}

.hit{
    background-color: salmon;
    background-image: url("images/fire.png");
    background-size: contain;
    
}

.sunk{
    background-image: url("images/skull.png");
    background-size: contain;
}