/* ==========================================================
   HALO ON TLX
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    /* HALO BACKGROUND */
    background-color: #02050a;
    background-image:
        linear-gradient(
            rgba(0, 10, 20, 0.25),
            rgba(0, 0, 0, 0.55)
        ),
        url("/images/halo-bg.png");

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;

    color: #d9ecff;

    /* PEAK EARLY-2000s FONT STACK */
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   OLD SCHOOL FIXED-WIDTH SITE
   ========================================================== */

.container {
    width: 780px;
    max-width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   TLX LOGO TOP LEFT
   ========================================================== */

body > a:first-child {
    display: block;

    width: 780px;
    max-width: calc(100% - 30px);

    margin: 12px auto 4px auto;

    text-decoration: none;
}

body > a:first-child img {
    height: 64px;


}


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

header {
    width: 780px;
    max-width: calc(100% - 30px);

    margin: 0 auto 10px auto;

    background:
        linear-gradient(
            to bottom,
            rgba(44, 93, 135, 0.96) 0%,
            rgba(12, 41, 73, 0.96) 48%,
            rgba(5, 22, 43, 0.97) 52%,
            rgba(17, 54, 86, 0.96) 100%
        );

    border-top: 2px solid #b5ddff;
    border-left: 2px solid #7eb6e8;
    border-right: 2px solid #173e63;
    border-bottom: 2px solid #071728;

    box-shadow:
        0 0 0 1px #000000,
        0 0 15px rgba(66, 159, 255, 0.65);

    padding: 13px;
}


/* HALO TITLE */

header h1 {
    margin: 0;

    text-align: center;

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

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

    letter-spacing: 10px;

    color: #ffffff;

    text-transform: uppercase;

    text-shadow:
        0 1px 0 #bddfff,
        0 2px 0 #6ca5d7,
        0 3px 0 #244e75,
        0 4px 0 #0a1c2c,
        0 0 8px #67c4ff,
        0 0 16px #226cff;
}


/* SERVER ADDRESS BOX */

header .value {
    width: 340px;
    max-width: 90%;

    margin: 8px auto 0 auto;

    text-align: center;

    font-family: "Courier New", monospace;
    font-size: 14px;
    font-weight: bold;

    color: #9eeaff;

    background: #020c16;

    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #5a8ab0;
    border-bottom: 1px solid #5a8ab0;

    box-shadow:
        inset 0 0 8px #000000,
        0 0 5px rgba(56, 164, 255, 0.5);

    padding: 5px 10px;

    letter-spacing: 1px;
}


/* ==========================================================
   MAIN CONTENT AREA
   ========================================================== */

main {
    padding-top: 0;
    padding-bottom: 20px;
}


/* ==========================================================
   SECTIONS / WINDOWS
   ========================================================== */

section {
    margin: 10px 0 16px 0;

    padding: 0 13px 13px 13px;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 16, 28, 0.94),
            rgba(2, 10, 18, 0.94)
        );

    border-top: 2px solid #769bbb;
    border-left: 2px solid #587d9b;

    border-right: 2px solid #07131d;
    border-bottom: 2px solid #050b10;

    box-shadow:
        0 0 0 1px black,
        0 4px 10px rgba(0, 0, 0, 0.8);
}


/* ==========================================================
   SECTION TITLE BARS
   ========================================================== */

section h2 {
    margin: 0 -13px 12px -13px;

    padding: 5px 9px;

    color: white;

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

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

    text-transform: uppercase;

    background:
        linear-gradient(
            to bottom,
            #3976a8 0%,
            #22577f 47%,
            #103553 51%,
            #173f60 100%
        );

    border-bottom: 1px solid #5b91bd;

    text-shadow:
        1px 1px 0 #000000,
        0 0 4px #63b7ff;

    letter-spacing: 1px;
}


/* ==========================================================
   PARAGRAPHS + LISTS
   ========================================================== */

p {
    color: #c6d7e4;
}

ol,
ul {
    margin-top: 8px;
    margin-bottom: 8px;

    padding-left: 32px;
}

li {
    padding: 3px 0;

    color: #d8e8f5;
}

li::marker {
    color: #70c9ff;
    font-weight: bold;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
    color: #56c7ff;

    font-weight: bold;
    text-decoration: underline;
}

a:visited {
    color: #a783ff;
}

a:hover {
    color: #ffffff;

    background: #174c78;

    text-decoration: none;

    text-shadow:
        0 0 5px #5ed4ff;
}


/* ==========================================================
   CODE / KEY / SERVER INFO
   ========================================================== */

pre,
.value {
    margin: 8px 0;

    padding: 7px 10px;

    color: #66e7ff;

    background: #000810;

    font-family: "Courier New", Courier, monospace;

    font-size: 13px;

    border-top: 2px solid #000000;
    border-left: 2px solid #000000;

    border-right: 1px solid #567b98;
    border-bottom: 1px solid #567b98;

    overflow-x: auto;

    text-shadow:
        0 0 3px #008cff;
}


/* ==========================================================
   SERVER SECTION
   ========================================================== */

.server {
    border-top-color: #83b7dd;
    border-left-color: #5d8daf;
}

.server:hover {
    box-shadow:
        0 0 0 1px #000000,
        0 0 12px rgba(57, 151, 224, 0.55);
}


/* ==========================================================
   OPTIONAL BUTTON CLASS
   ========================================================== */

.button {
    display: inline-block;

    padding: 5px 12px;
    margin: 4px 2px;

    color: #ffffff !important;

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

    text-transform: uppercase;
    text-decoration: none;

    background:
        linear-gradient(
            to bottom,
            #4485b6,
            #163e5d
        );

    border-top: 2px solid #a5d8ff;
    border-left: 2px solid #78aacc;

    border-right: 2px solid #07131f;
    border-bottom: 2px solid #07131f;

    box-shadow:
        1px 1px 0 #000000;
}

.button:hover {
    background:
        linear-gradient(
            to bottom,
            #69b9ef,
            #245e89
        );
}


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

footer {
    width: 780px;
    max-width: calc(100% - 30px);

    margin: 5px auto 25px auto;

    padding: 7px;

    text-align: center;

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

    font-size: 10px;

    color: #7291aa;

    background: rgba(0, 8, 16, 0.92);

    border: 1px solid #31516a;

    box-shadow:
        0 0 0 1px #000000;
}


/* GIVE IT THAT "WE MADE THIS IN FRONTPAGE" FEEL */

footer::after {
    color: #536b7d;
}


/* ==========================================================
   CRT / OLD MONITOR TEXTURE
   ========================================================== */

body::after {
    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 9999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            rgba(0,0,0,0.025) 2px,
            rgba(0,0,0,0.025) 3px
        );
}


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

@media (max-width: 820px) {

    .container,
    header,
    footer,
    body > a:first-child {
        width: calc(100% - 20px);
        max-width: none;
    }

    header h1 {
        font-size: 34px;
        letter-spacing: 6px;
    }

    section {
        margin-bottom: 12px;
    }
}