.header-logo span.b,
.header-logo span.w,
.header-logo span.bf {
    font-size: 18px;
    font-weight: 400;
}

.header-logo span.w {
    background: #fff;
    color: #414141;
}

.header-logo span.w:hover {
    background: #414141;
    color: #fff;
}

.header-logo a:hover {
    background: transparent;
}

.post-list>li .post-link {
    border: 4px solid #414141;
}

.post-list>li .post-meta {
    padding: 2px 14px 2px 10px;
}

.posti {
    max-width: 728px;
}

.posti .post-title {
    margin: 0;
    text-align: left;
    line-height: 1.22;
}

.posti .post-byline {
    color: #aaa;
    font-size: 1em;
    line-height: 1.8;
    margin: 1em 0 2em 0;
}

.posti .post-byline span,
.posti .post-byline time {
    color: #d58f8f;
    font-weight: 700;
}

.posti .post-byline .heart {
    color: #ff5252;
}

.posti .post-category {
    color: #d58f8f;
}

@media (max-width: 650px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    #main.col-12 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .logo {
        margin: 2em 0 2em 1em;
    }

    .post-list {
        width: 100%;
    }

    .post-list>li {
        box-sizing: border-box;
        width: 100%;
        height: 300px;
        margin: 0 0 20px 0;
        padding: 0 20px;
    }

    .post-list>li .post-link {
        box-sizing: border-box;
        border-width: 4px;
    }

    .posti {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .posti .post-title {
        font-size: 2.8em;
        text-align: left;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .posti .post-byline {
        font-size: 1.05em;
        line-height: 1.9;
        margin: 1.15em 0 2.35em 0;
    }

    .posti .post-content p,
    .posti .post-content li {
        font-size: 1.18em;
        line-height: 2;
    }

    .posti .post-content p {
        margin: 1.45em 0;
    }

    .posti pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .posti pre code {
        white-space: pre;
    }

    .posti img {
        max-width: 100%;
        margin: 0;
    }

    #menu-page {
        margin-left: 168px !important;
    }
}

@media (max-width: 460px) {
    .logo {
        margin-left: 1em;
    }

    .posti {
        padding: 0;
    }

    .posti .post-title {
        font-size: 2.55em;
    }

    .posti .post-content p,
    .posti .post-content li {
        font-size: 1.12em;
    }
}