/* tag */
h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
}
h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
}
h4 {
    font-size: 1.2rem;
    margin-top: 2rem;
}
pre code::first-line {
    line-height: 0;
}


/* base */
.blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
    font-size: 2rem;
    font-weight: bold;
}
.blog-header-logo:hover {
    text-decoration: none;
}
.blog-footer {
    padding: 1rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}
a.favor-title {
    color: rgb(119, 119, 119);
}
#overlay {
    position: fixed;
    top: 0;
    z-index: 1051;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.2);
}
#spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}


/* detail */
.post-created, .post-updated, .comment-created, .comment-status, .comment-length {
    font-size: 90%;
    color: #999;
}

.code-header {
    font-size: 80%;
    padding: 0.25rem 0.5rem;
    background-color: #e5e5e5;
}

.code {
    color: #444;
    background: #f0f0f0;
    padding: 0.1rem;
    margin: 0 0.1rem;
    display: inline-block;
}

.comment {
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.comment-pipe {
    color: #999;
    padding: 0 0.2rem;
}

/* comment modal */
.form-control-plaintext {
    padding: .375rem .75rem;
}
.comment-note {
    font-size: 80%;
    color: #444;
}


/* code-header */
.code-btn {
    position: relative;
    float: right;
}
.code-btn button {
    padding: .15rem .5rem;
    font-size: 90%;
    color: #818a91;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: .25rem;
}
.code-btn button:hover {
    color: #fff;
    background-color:#818a91;
}
#code_modal .code-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}

/* list */
.page-item {
    width: 6rem;
    text-align: center;
}

h3.list-title {
    margin-top: 0.2rem;
}
h3.list-title a {
    font-size: 1.2rem;
    color: rgb(119, 119, 119);
}
.list-summary {
    font-size: 0.9rem;
    color: rgb(119, 119, 119);
    margin-top: 0.3rem;
    margin-bottom: 0;
}


/* other */
@media (min-width: 300px) {
    .d-300-block {
        display: block!important;
    }
    .d-300-none {
        display: none!important;
    }
}
.position-sticky {
    top: 0;
    bottom: 0;
}
@media (min-width: 768px) {
    .ads .img-fluid {
        width: 100%;
    }
}