body {
    background-color: var(--white);
}

.post {
    margin: 128px 0;
}

.meta .date {
    color: var(--grey);
    font-weight: 600;
}

.meta .title {
    font-size: 48px;
    margin-top: 16px;
}

.content p, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .meta .date, .content figure, .divider, .container, hr, .meta .title, .content blockquote, .content table, .content video, .content ul, .content ol, .about {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.content .highlight {
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--body-bg);
    border-radius: 4px;
    max-width: calc(800px - 16px * 2);
}

@media screen and (max-width: 800px) {
    .content .highlight {
        border-radius: 0;
    }
}

.content .highlight .gutter {
    padding-right: 16px;
}

.content table, .content video {
    display: block;
}

.content video {
    max-width: 100%;
    padding: 0;
}

.content ul, .content ol {
    padding: 0 16px;
    padding-left: 32px;
    max-width: calc(800px - 16px * 2);
}

.content ul *, .content ol * {
    padding: 0;
}

.content blockquote {
    max-width: calc(800px - 16px * 2);
    padding: 0 8px;
}

.about {
    border-radius: 7px;
    background-color: var(--body-bg);
    padding: 16px;
    margin: 64px auto;
}

.about h1 {
    margin: 0;
}