* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

body {
    padding: 20px 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "top    top"
        "left   right";
}

.top {
    grid-area: top;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 2px inset gray;
    margin-bottom: 1em;
}

.state {
    margin: 1em 0;
    display: flex;
    justify-content: space-between;
}

.left {
    grid-area: left;
    overflow-y: scroll;
}

table {
    border-spacing: 0;
}
tr:nth-child(odd) {
    background-color: rgb(214, 214, 214);
}
td {
    padding: 2px 10px;
}

.right {
    grid-area: right;
    overflow-y: scroll;
}

dl {
    margin: 0;
}