body {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: "leftbar content rightbar";

    height: 100vh;
    width: 100vw
}


#content {
    grid-area: content;

    display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-areas:
        "header"
        "body"
        "footer";
}


#header {
    grid-area: header;

    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: "pfp name";

    height: 100%;
    width: 100%;

    padding: 0 0 1em 0;
    border-bottom: 2px solid black;
}


#header img {
    grid-area: pfp;
    border-radius: 50%;

    display: block;
    height: 8em;
    width: 8em;
    margin: auto auto auto auto;
}


#header h1 {
    grid-area: name;

    margin: auto auto auto 1em;
}


#body {
    grid-area: body;

    height: 100%;
    width: 100%;
    margin: 1em auto auto auto;
}