/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */

body {
    background:#111 url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExazhtMmw4cWlrY29ndjZucnZrdWtpcmtvNG1meW0zcGpmOTd5ZDVsZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Qgfz2N36MgUBG/giphy.gif");
    background-size: cover;
    background-position: center;

    color: #A48C72;
    font-family: Georgia, serif;

    padding: 20px;
}

/* CONTAINER */

.container {
    width: min(95%, 750px);

    margin: 30px auto;

    background: linear-gradient(
        to bottom,
        #3a2f25,
        #2e241c
    );

    border: 1px solid #000;

    border-radius: 10px;

    box-shadow:
        0 0 25px rgba(235,217,195,0.35);
}

/* HEADER */

header {
    padding: 25px;
    text-align: center;

    border-bottom:
        1px dotted #BB8959;
}

.site-title {
    font: bold 36px 'Doto', serif;

    color: #CB9C67;
}

.site-subtitle {
    margin-top: 8px;

    font-size: 12px;

    color: #A48C72;
}

.post-image {
    width: 100%;
    height: auto;

    display: block;

    padding: 6px;

    background: #2e241c;

    border: 1px solid #BB8959;

    box-shadow:
        0 0 10px rgba(0,0,0,.4);

    margin: 15px auto;
}

/* NAV */

nav {
    background: #29211D;

    text-align: center;

    padding: 8px;

    border-bottom:
        1px dotted #BB8959;
}

nav a {
    color: #EBD2B4;

    text-decoration: none;

    margin: 0 10px;
}

/* POSTS */

main {
    padding: 20px;
}

.post {
    margin-bottom: 35px;

    padding-bottom: 25px;

    border-bottom:
        1px dotted rgba(203,156,103,.5);
}

.post:last-child {
    border-bottom: none;
}

/* TITLE */

.post-title {
    font: bold 24px 'Doto', serif;

    color: #CB9C67;

    margin-bottom: 6px;
}

/* DATE */

.post-date {
    font-size: 11px;

    color: #856F57;

    margin-bottom: 12px;
}

/* CONTENT */

.post-content {
    font-size: 14px;

    line-height: 1.7;

    color: #EBD2B4;
}

.post-content p {
    margin-bottom: 12px;
}

/* FOOTER */

footer {
    text-align: center;

    padding: 10px;

    border-top:
        1px dotted #BB8959;
}

footer a {
    color: #CB9C67;
}

/* MOBILE */

@media (max-width: 700px) {

    .site-title {
        font-size: 28px;
    }

    .post-title {
        font-size: 20px;
    }

    .post-content {
        font-size: 13px;
    }
}