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

body {
    height: 100%;
    min-height: 100vh;
    width: 100%;
    border: 5px solid rgb(107, 107, 107);
    background-color: rgb(58, 169, 206);
    font-family: sans-serif;
    user-select: none;
}

#tabuleiro{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#barco {
    font-size: 15vh;
    text-align: center;
}

.butao {
    text-align: center;
    line-height: 7vh;
    width: 90%;
    margin: 3px;
    height: 7vh;
    border-radius: 0;
    border: solid 5px black;
    background-color: purple;
}

#select {
    display: flex;
    justify-content: center;
    gap: 5vw;
}

#player {
    display: flex;
    flex-direction: row;
    width: min-content;
    color: white;
    margin: auto;
}

.press {
    padding: 25px;
    background-color: blue; 
    transform: skewX(-15deg);
    display: inline-block; 
}

.press > * {
    transform: skewX(15deg); 
    display: block;
}
#red {
    border: solid 4px black;
    cursor: grab;
    background-color: red;
}

#blue {
    border: solid 4px black;
    cursor: grab;
    background-color: #2A7B9B;
}