body {
    margin: 50px;
    padding: 0;
    background-image: url(/media/background.png);
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 1095px;
    max-height: 1095px;
}

#ui {
    display: grid;
    grid-template-areas: 
    "head head head"
    "controls none scoreboard"
    "playerBoard ship_buttons log"
    "computerBoard ship_buttons log";
    grid-template-columns: fit-content(10%) .2fr;
    grid-template-rows: auto;
    background-color: rgba(128, 0, 128, 0.6);
    color: beige;
    max-width: 90%;
    max-height: 90%;
    border: 8px double black;
} 

#scoreboard_container {
    grid-area: scoreboard;
}

#ui > * {
    margin-left: 20px;
    margin-right: 20px;
}

#header {
    grid-area: head;
}

#control_buttons_container {
    grid-area: controls;
}

#ship_deployment_container {
    grid-area: ship_buttons;
}

#player_board_container {
    grid-area: playerBoard;
}

#computer_board_container {
    grid-area: computerBoard;
    margin-bottom: 20px;
}

#log_container{
    grid-area: log;
}

#log {
    overflow-y:auto;
    max-height: 700px;
}

#settings_container {
    border: 8px double black;
    display: inline-block;
    padding: 5px;
    position: fixed;
    top: 40%;
    left: 30%;
    transform: translateX(-50%) translateY(-50%);
    background-color: purple;
    display: none;
}