/* =========================================================
   Base
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #eeeeee;
    color: #222222;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   Overall site
   ========================================================= */

.site {
    width: 1200px;
    max-width: calc(100% - 40px);

    margin: 0 auto;
}


/* =========================================================
   Header
   ========================================================= */

.site-header {
    display: grid;

    grid-template-columns:
        260px
        1fr
        220px;

    gap: 25px;

    align-items: start;

    padding: 20px 0;

    border-bottom:
        3px solid #222222;

    background: #ffffff;
}


/* =========================================================
   Login
   ========================================================= */

.login-box {
    padding: 12px;

    border:
        1px solid #999999;

    background: #f5f5f5;
}

.login-title {
    margin-bottom: 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.login-row {
    margin-bottom: 8px;
}

.login-row label {
    display: block;

    margin-bottom: 2px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: bold;
}

.login-row input {
    box-sizing: border-box;

    width: 100%;

    padding: 6px 7px;

    border:
        1px solid #888888;

    background: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

.login-box button {
    margin-top: 4px;

    padding: 6px 18px;

    border:
        1px solid #555555;

    background: #333333;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    cursor: pointer;
}

.login-box button:hover {
    background: #111111;
}

.login-feedback {
    margin-top: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
}


/* =========================================================
   Site title
   ========================================================= */

.site-title {
    text-align: center;
}

.site-title h1 {
    margin: 10px 0 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 58px;
    line-height: 1;

    letter-spacing: -0.04em;
}

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

    color: #666666;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.15em;
}


/* =========================================================
   Header links
   ========================================================= */

.header-links {
    padding-top: 12px;

    text-align: right;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}

.header-links div {
    margin-bottom: 6px;
}

a {
    color: #333333;
}

a:hover {
    color: #000000;
}


/* =========================================================
   Main three-column layout
   ========================================================= */

.content-layout {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr)
        180px;

    gap: 30px;

    padding: 30px 0;
}


/* =========================================================
   Sidebars
   ========================================================= */

.sidebar {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}

.sidebar-block {
    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom:
        1px solid #bbbbbb;
}

.sidebar-block h2 {
    margin: 0 0 10px;

    padding-bottom: 5px;

    border-bottom:
        2px solid #333333;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.sidebar-block ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sidebar-block li {
    padding: 5px 0;

    border-bottom:
        1px dotted #cccccc;
}

.sidebar-block a {
    text-decoration: none;
}

.sidebar-block a:hover {
    text-decoration: underline;
}


/* =========================================================
   Advertisement blocks
   ========================================================= */

.ad-box {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 120px;

    border:
        1px solid #bbbbbb;

    background: #e4e4e4;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


/* =========================================================
   Posts
   ========================================================= */

.posts {
    min-width: 0;
}

.post {
    margin-bottom: 35px;

    padding-bottom: 25px;

    border-bottom:
        1px solid #bbbbbb;
}

.post-header {
    margin-bottom: 15px;
}

.post h2 {
    margin: 0;

    font-size: 30px;

    line-height: 1.15;
}

.post-meta {
    margin-top: 5px;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.post p {
    margin: 12px 0;
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    padding: 20px 0 40px;

    border-top:
        3px solid #222222;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    text-align: center;
}

.site-footer a {
    color: #555555;

    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        grid-template-columns: 1fr;
    }

    .site-title {
        order: -1;
    }

    .header-links {
        text-align: left;
    }

    .content-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-left {
        order: 2;
    }

    .posts {
        order: 1;
    }

    .sidebar-right {
        order: 3;
    }

}