#blog_list {
    margin: 1em;
    font-size: 0.9em;
}

@media only screen and (max-width: 799px) {
    #blog_list {
        margin: 5px;
        font-size: 0.85em;
    }
}

#blog_list .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.blog_item {
    padding: 0;
    position: relative;
    display: inline-flex; /* must be inline here */
    flex-direction: column;
    overflow: hidden;
    width: 21.5em;
    min-width: 21.5em;
}


@media only screen and (max-width: 799px) {
    .blog_item {
        width: 17em;
    }
    .blog_item.whitebox {
        margin: 0.5em;
    }
}

@media only screen and (max-width: 540px) {
    .blog_item {
        width: 45%;
    }
    .blog_item.whitebox {
        margin: 0.5em 4px;
    }
}


.blog_item > a {
    position: absolute;
    height: 100%;
    width: 100%;
}

.blog_item > .img_container {
    margin: 0;
    width: 100%;
    height: 12em;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #ecf0f1;
    color: #a6abad;
    overflow: hidden;
}

@media only screen and (max-width: 799px) {
    .blog_item > .img_container {
        height: 10.5em;
    }
}

.blog_item > .img_container > img {
    width: 100%;
    text-align: center;
}

.blog_item > .blog_info {
    margin: 0.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog_item > .blog_info * {
    margin: 0;
}

.blog_item > .blog_info .title {
    padding: 1px;
    font-size: 1.2em;
}

.blog_item > .blog_info .data {
    margin: 0.5em 0 0 0;
    font-size: 0.85em;
    opacity: 0.65;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

















/* unpublished */

.unpublished {
    margin-bottom: 2em;
}

.unpublished h2 {
    margin: 0;
}

.unpublished p.context {
    margin: 0.5em;
    opacity: 0.8;
}

.unpublished table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.unpublished table tr:first-of-type th {
    border-bottom: 1px solid #999;
}

.unpublished table tr td {
    border-bottom: 1px solid #E0E0E0;
}

.unpublished table tr:last-of-type td {
    border-bottom: none;
}

.unpublished table td.blog_actions {
    text-align: right;
}

.unpublished table th.blog_actions {
    width: 5em;
}

.unpublished td.author_name {
    text-align: left;
}
.unpublished td.author_name div {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}
.unpublished td.author_name div img {
    margin: 0 0.2em 0 0;
}

.unpublished table td.last_edit {
    text-align: center;
}

td.blog_actions > div {
    margin: 0;
    display: flex;
    justify-content: center;
}

.unpublished table td.blog_actions a {
    margin: 0.1em;
    font-size: 1.2em;
    color: #cbcbcb;
    width: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.unpublished table td.blog_actions i {
}

.unpublished table .blog_actions a:hover {
    color: #428BCA;
}

.unpublished .actions {
    display: flex;
    margin: 1.2em 0 0 0;
}

.unpublished .actions a {
    display: inline-block;
    margin: 0 0.4em;
}
.unpublished .actions a:last-of-type {margin-right: 0;}
.unpublished .actions a:first-of-type {margin-left: 0;}


.unpublished th.img_uploaded, .unpublished td.img_uploaded {
    text-align: center;
}
.unpublished td.img_uploaded i {
    width: 1.2em;
}
.unpublished td.img_uploaded i.fa-check {
    color: green;
}
.unpublished td.img_uploaded i.fa-xmark {
    color: red;
}























/* Blogpost itself */
/* header */
.metaheader {
    display: flex;
    justify-content: center;
    padding: 0 0.5em;
    margin: 0 0 1em 0;
}

.metaheader > div {
    margin: 0.2em 1.5em;
    white-space: nowrap;
    display: flex;
}

.metaheader p {
    margin: 0;
}

.metaheader .label {
    opacity: 0.2;
    margin-right: 0.4em;
}

.metaheader .user_image {
    height: 1.3em;
    border-radius: 10%;
    margin: 0 0.3em 0 0;
}

@media (max-width: 599px) {
    .metaheader {
        flex-wrap: wrap;
        font-size: 0.8em;
    }
}













/* content */

#blogpost {

}

#blogpost .author_actions {
    position: absolute;
    right: 0.8em;
    top: 0;
    font-size: 1.6em;
    color: #222;
    z-index: 5;
    display: flex;
}
@media only screen and (max-width: 599px) {
    #blogpost .author_actions {
        right: 0.2em;
        top: 0.15em;
        font-size: 1.1em;
    }
}

#blogpost .author_actions a {
    margin: 0 0.2em;
    color: #a4a4a4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 1px 2px 10px -5px #000;
    text-decoration: none;
}

#blogpost .author_actions a i {
    width: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#blogpost .author_actions a:hover {
    cursor: pointer;
    color: #428BCA;
    background-color: #FAFAFA;
}



/* content */

#blogpost #blogpost_content_container {
    display: flex;
    justify-content: center;
}

#blogpost #blogpost_content {
    max-width: 82ch;
    padding: 1em;
}
@media only screen and (max-width: 699px) {
    #blogpost #blogpost_content {
        padding: 0.5em;
    }
}
@media only screen and (max-width: 499px) {
    #blogpost #blogpost_content {
        padding: 0.2em;
    }
}

ul li {
    margin: 0.6em 0;
}

















/* donation square */

#donation_container,
.blog_donation_container {
    width: 100%;
    display: flex;
    justify-content: center;
    color: black;
}

.blog_donation {
    display: flex;
    background-color: rgba(0,0,0,0.02);
    border: 3px solid gold;
    font-weight: bold;
    margin: 1em;
    padding: 0.6em 0.9em;
    font-size: 1.2em;
    border-radius: 10px;
    align-items: baseline;
}
.blog_donation:hover {
    background-color: gold;
    border-color: goldenrod;
    cursor: pointer;
}

.blog_donation i {
    opacity: 0.8;
}

.blog_donation a {
    text-decoration: none;
    white-space: nowrap;
    color: black;
    margin-left: 0.4em;
}