/*
 * Some resources:
 *
 * https://www.w3schools.com/cssref/css_selectors.asp
 */

body {
    background: url('https://knoxtales-15276.kxcdn.com/images/meerkat-2.jpg') no-repeat center center fixed;
    background-color: #a47f62;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: whitesmoke;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

main {
    max-width: 70ch;
    padding: 2ch 2ch 0 2ch;
    margin: auto;
}

ul li {
    margin-bottom: 10px;
}

ul li:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Classes                                                                    */
/* -------------------------------------------------------------------------- */

.image-container {
    border-radius: 5px;
    overflow: hidden;
}

.post-wrapper {
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 40px;
}

.draft {
    /* border: 1px solid yellow; */
    display: none;
}

.wip {
    background: rgba(238, 230, 116, 0.14);
}

.post h1 > a {
    color: #fff;
    text-decoration: none;
}

.post h1 > a:hover {
    border-bottom: 1px solid orange;
    color: orange;
}

.post h1 {
    text-align: left;
    font-size: 120%;
}

.post img {
    border-radius: 5px;
    filter: grayscale(100%);
    width: 100%;
    transition: transform 1s;
}

.post img:hover {
    filter: grayscale(0%);
    transform: scale(1.2);
    transition: transform 1s;
}

.post p:last-child {
    margin-bottom: 0;
}

.post-author {
    font-size: 80%;
    margin-bottom: 10px;
}

/*
.post-title {
    font-size: 120%;
    margin-top: 10px;
    text-align: left;
}

.post-title > a:hover {
    border-bottom: 1px solid orange;
    color: orange;
}
*/

/* -------------------------------------------------------------------------- */
/* Columnar layout                                                            */
/* -------------------------------------------------------------------------- */

/* columns (column container) */
/* -------------------------- */

.columns {
    display: flex;
    justify-content: space-evenly;
    /* flex-wrap: wrap; */
    padding-top: 20px;
}

/* individual columns */
/* ------------------ */

.column a {
    color: whitesmoke;
}

.column li {
    margin-left: -22px;
}

/* left */
/* ---- */

.column.left {
    flex: 0 0 345px;
    order: 1;
    margin: 0 10px 0 10px;
}

/* centre */
/* ------ */

.column.centre {
    width: 712px;
    order: 2;
}

/* right */
/* ----- */

.column.right {
    flex: 0 0 345px;
    order: 3;
    margin: 0 10px 0 10px;
}

.sidebar-section {
    margin: 0 40px 0 40px;
}

.sidebar-section h1 {
    font-size: 120%;
    margin-top: 0;
    text-align: left;
}

/* -------------------------------------------------------------------------- */
/* Media Queries                                                              */
/* -------------------------------------------------------------------------- */

@media only screen and (max-width : 1280px) {

    .columns {
        flex-direction: column;
    }

    .column li {
        margin-left: 0;
    }

    .column.left {
        flex: 0 1;
        margin: auto;
        order: 1;
        width: 712px;
    }

    .column.centre {
        flex: 0 1;
        margin: auto;
        order: 3;
    }

    .column.right {
        flex: 0 1;
        margin: auto;
        order: 2;
        width: 712px;
    }
}

@media only screen and (max-width : 712px) {
    .column.left {
        width: 100%;
    }

    .column.centre {
        width: 100%;
    }

    .column.right {
        width: 100%;
    }
}

@media only screen and (max-width : 512px) {
    .post-wrapper {
        padding: 15px;
    }

    .sidebar-section {
        margin-left: 15px;
        margin-right: 15px;
    }

}