/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* =====================================================
   ОСНОВА
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    background: #000;
}

body {
    margin: 0;

    background-color: #000;

    /*
       Имитация того самого космического /
       звёздного background.gif
    */
    background-image:
        radial-gradient(circle at 15% 20%, #ffffff 0 1px, transparent 1px),
        radial-gradient(circle at 80% 12%, #777 0 1px, transparent 1px),
        radial-gradient(circle at 55% 80%, #aaa 0 1px, transparent 1px),
        radial-gradient(circle at 90% 65%, #555 0 1px, transparent 1px);

    background-size:
        97px 113px,
        173px 149px,
        211px 197px,
        131px 173px;

    color: #000;

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

    font-size: 18px;
}


/* =====================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ===================================================== */

.page {
    width: 1200px;
    max-width: calc(100% - 28px);

    margin: 14px auto;
}


/* =====================================================
   HEADER
   ===================================================== */

.header {
    margin-bottom: 18px;

    padding: 10px;

    background: #aaa;

    border: 1px solid #fff;

    /*
       Имитируем старую объёмную рамку
    */
    box-shadow:
        inset 2px 2px 0 #fff,
        inset -2px -2px 0 #555;
}

.header-inner {

    height: 160px;

    display: flex;
    align-items: center;

    position: relative;

    overflow: hidden;

    background-color: #aeeeff;

    /*
       Голубой "безумный" фон.
       Потом сюда можно поставить настоящий GIF.
    */
    background-image:
        repeating-linear-gradient(
            8deg,
            rgba(255,255,255,.35) 0px,
            rgba(255,255,255,.35) 3px,
            transparent 3px,
            transparent 11px
        ),
        repeating-linear-gradient(
            -8deg,
            rgba(0,120,220,.12) 0px,
            rgba(0,120,220,.12) 5px,
            transparent 5px,
            transparent 13px
        );

    border: 1px solid #fff;
}


/* =====================================================
   АВАТАР
   ===================================================== */

.avatar {

    width: 128px;
    height: 128px;

    margin-left: 20px;

    padding: 4px;

    background: #fff;

    border: 1px solid #999;

    box-shadow:
        2px 2px 0 #555;

    flex-shrink: 0;
}

.avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   НАЗВАНИЕ
   ===================================================== */

.site-title {

    flex: 1;

    text-align: center;

    padding-right: 120px;
}

.site-title h1 {

    margin: 0;

    color: #09c9ff;

    font-family:
        Impact,
        "Arial Black",
        sans-serif;

    font-size: 72px;

    line-height: .95;

    letter-spacing: 2px;

    /*
       Синий объёмный текст в духе старых
       сайтов / WordArt
    */
    text-shadow:
        2px 2px 0 #005b9f,
        4px 4px 0 #fff,
        6px 6px 0 #005b9f;
}

.site-subtitle {

    margin-top: 12px;

    color: #003b75;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;
}


/* =====================================================
   MAIN
   ===================================================== */

.main {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 18px;

    align-items: stretch;
}


/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar {

    min-height: 560px;

    padding: 20px 14px;

    background-color: #b9f2ff;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(0,130,180,.08) 0px,
            rgba(0,130,180,.08) 2px,
            transparent 2px,
            transparent 7px
        );

    border: 1px solid #fff;

    box-shadow:
        inset 3px 3px 0 #fff,
        inset -3px -3px 0 #777;
}


/* =====================================================
   МЕНЮ
   ===================================================== */

.sidebar nav {

    margin-bottom: 35px;
}

.sidebar nav a {

    display: block;

    padding: 4px 5px;

    color: #0000cc;

    font-size: 23px;

    line-height: 1.25;

    text-decoration: none;
}

.sidebar nav a:hover {

    color: #fff;

    background: #0066aa;
}

.icon {

    display: inline-block;

    width: 32px;

    text-align: center;

    font-size: 22px;
}


/* =====================================================
   SIDEBAR BOX
   ===================================================== */

.sidebar-box {

    margin-top: 25px;

    padding: 10px;

    border-top: 2px solid #fff;
    border-left: 1px solid #fff;

    border-right: 1px solid #777;
    border-bottom: 1px solid #777;

    background: rgba(255,255,255,.2);

    font-size: 14px;
}

.sidebar-title {

    margin-bottom: 8px;

    color: #003b75;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;
}

.sidebar-box p {

    margin: 0;
}


/* =====================================================
   СЧЁТЧИК
   ===================================================== */

.counter {

    padding: 5px;

    background: #000;

    color: #00ff00;

    font-family: "Courier New", monospace;

    font-size: 18px;

    text-align: center;

    letter-spacing: 3px;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.buttons {

    margin-top: 30px;
}

.button {

    width: 88px;
    min-height: 31px;

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

    margin-bottom: 8px;

    padding: 3px;

    background: #00a9df;

    border: 2px outset #fff;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: bold;

    text-align: center;
}


/* =====================================================
   CONTENT
   ===================================================== */

.content {

    min-height: 560px;

    padding: 26px 30px;

    background-color: #eefaff;

    /*
       Лёгкая бумажно-цифровая текстура
    */
    background-image:
        repeating-linear-gradient(
            7deg,
            rgba(0,120,180,.06) 0px,
            rgba(0,120,180,.06) 2px,
            transparent 2px,
            transparent 8px
        );

    border: 1px solid #fff;

    box-shadow:
        inset 3px 3px 0 #fff,
        inset -3px -3px 0 #777;

    overflow: hidden;
}


/* =====================================================
   POSTS
   ===================================================== */

.post {

    max-width: 900px;

    font-size: 21px;

    line-height: 1.35;
}

.post h2 {

    margin: 5px 0 0;

    color: #000;

    font-size: 31px;

    line-height: 1.1;
}

.date {

    margin: 2px 0 25px;

    color: #555;

    font-size: 12px;

    font-weight: bold;
}

.post p {

    margin: 0 0 24px;
}

.post a {

    color: #0000cc;
}

.post hr {

    margin: 35px 0;

    border: 0;

    border-top: 3px double #006699;
}


/* =====================================================
   ЦИТАТА
   ===================================================== */

.quote {

    margin: 30px 0;

    padding: 15px 20px;

    background: #bcecff;

    border-left: 7px solid #0066aa;

    color: #003b75;

    font-size: 22px;

    font-weight: bold;
}


/* =====================================================
   FOOTER
   ===================================================== */

.footer {

    min-height: 80px;

    margin-top: 18px;

    padding: 22px 34px;

    display: flex;

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

    background-color: #aee6ff;

    background-image:
        repeating-linear-gradient(
            -10deg,
            transparent 0px,
            transparent 18px,
            rgba(0,100,180,.10) 18px,
            rgba(0,100,180,.10) 22px
        );

    border: 1px solid #fff;

    box-shadow:
        inset 3px 3px 0 #fff,
        inset -3px -3px 0 #777;

    font-size: 15px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 800px) {

    .page {

        max-width: calc(100% - 12px);

        margin: 6px auto;
    }

    .header-inner {

        height: 120px;
    }

    .avatar {

        width: 85px;
        height: 85px;

        margin-left: 10px;
    }

    .site-title {

        padding-right: 10px;
    }

    .site-title h1 {

        font-size: 38px;
    }

    .site-subtitle {

        font-size: 8px;

        letter-spacing: 1px;
    }

    .main {

        display: block;
    }

    .sidebar {

        min-height: auto;

        margin-bottom: 12px;
    }

    .sidebar nav {

        margin-bottom: 10px;
    }

    .sidebar nav a {

        display: inline-block;

        margin-right: 8px;

        font-size: 19px;
    }

    .sidebar-box,
    .buttons {

        display: none;
    }

    .content {

        padding: 20px 15px;
    }

    .post {

        font-size: 18px;
    }

    .post h2 {

        font-size: 25px;
    }

    .footer {

        display: block;

        text-align: center;
    }

    .footer div + div {

        margin-top: 8px;
    }
}