body {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
    background: black;
    background-image: url('../media/pirateShipBackground.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: top right;
}
article {
    height: 600px;
    background:peachpuff;
    color:black;
    padding:10px;
    max-width:850px;
    min-width:370px;
    margin-left:auto;
    margin-right:auto;
    opacity:.9;
}
h1{
    text-align:center;
}
table{
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:20px;
}
td{
    border-right:1px solid black;
    border-top:1px solid black;
    padding:10px;
}
section {
    width: 360px;
    height: 310px;
    margin-right: auto;
    margin-left: auto;
}
.board {
    display: grid;
    grid-template-columns: repeat(7, 48px);
    grid-template-rows: repeat(6, 48px);
    gap: 2px;
    background-color: #555;
    outline: 5px inset black;
}
.cell {
    background-color: #eee;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    text-align: center;
}
.silver {
    background-color: silver;
}
.yellow {
    background-color: darkgoldenrod;
}
#navbar {
    overflow: hidden;
    background-color: #333;
}
#navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 12px;
    text-decoration: none;
    font-size: 17px;
}
#navbar a:hover {
    background-color: silver;
    color: black;
}
#navbar a.active {
    background-color: orangered;
    color: white;
}