body {
    display: grid;
    gap: 0px;
    grid-template-areas:
        "header header header"
        "character viewport info"
        "character chat who";
    grid-template-columns: 1fr 10fr 2fr;
    grid-template-rows: 1.5em 1fr 18em;
    
    height: 100vh;
    max-height: 100%;
    margin: 0;
    
    background-color: #222;
}

div.header {
    background-color: #d66824;
    grid-area: header;
    text-align: center;
}

div.character {
    background-color: #5324d6;
    grid-area: character;
    padding: 0.5em;
}

div.viewport {
    grid-area: viewport;
    width: 100%;

    background-color: hsl(196, 84%, 85%);
    opacity: 0.8;
    background-image:  radial-gradient(circle, #1f9fce 1px, transparent 1px), radial-gradient(circle, #444CF7 1px, transparent 1px) ;
    background-size: 5px 40px, 40px 5px;
    background-position: -2.5px -10px, -10px -2.5px;
}

div.info {
    background-color: #bd7cd7;
    grid-area: info;
    padding: 0.5em;
}

div.who {
    background-color: #87bb1f;
    grid-area: who;
    padding: 0.5em;
}

div.chat {
    background-color: #d7db72;
    grid-area: chat;
    padding: 0.5em;
}