body {
    margin: 0;
}

.main-interface {
    margin-top: 10px;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: 880px;
    grid-template-columns: 200px 480px 200px;
    grid-template-rows: 64px 480px;
    grid-template-areas:
            "header header "
            "left-menu main-game"
            "rating rating";
    border: 4px solid #343434;
}

.header {
    grid-area: header;
    background-color: #E0FFFF;
    text-align: center;
    border: solid #343434;
    border-width: 0 0 4px 0;

}

.left-menu {
    grid-area: left-menu;
    text-align: center;
    border: solid #343434;
    border-width: 0 4px 0 0;
    background-color:#E0FFFF;
    font-size: 1.3rem;

}

.right-menu {
    overflow-x: auto;
    overflow-y: auto;
    padding: 10px;
    text-align: left;
    border: solid #343434;
    border-width: 0 0 0 4px;
    background-color:#ffa8a8; 
    font-size: 1.2rem;
}

.rating {
    text-align: center;
    border: solid #343434;
    border-width: 0 0 4px 4px;
    background-color:#ff7373;
}

.time {
    border: solid #343434;
    border-width: 0 0 4px 0;
}

.level {
    border: solid #343434;
    border-width: 0 0 4px 0;
}

.game-field {
    grid-area: main-game;
    display: grid;
    padding: 2px;
}

.start {
    width: 196px;
    height: 169px;
}

.square {
    size: auto;
    margin: 1px;
}

.bot {
    text-align: center;
    background-color: #ff7373;
    border: solid #343434;
    border-width: 4px 4px 4px 4px;
    margin-top: 10px;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    width: 880px;

}