html {
    color: var(--primary);
    font-family: var(--font-family);
    font-size: .938em;
    line-height: 1.4;
    background-color: var(--secondary);
    overflow-y: scroll;
    direction: ltr;
    display: block;
    height: 100%;
}

body {
    min-width: 0;
    min-height: 100%;
    margin: 0 auto;
    background-attachment: fixed;
    background-size: cover;
    display: block;

    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }

    > main, > header, > footer {
        display: block;
        width: calc(100% - 16px);
        max-width: 1110px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 8px;
        padding-right: 8px;
    }
}

main > article {
    background-color: rgba(255, 255, 255, 0.8);
}

img {
    max-width: 100%;
}

main {
    position: relative;
    padding-top: 5.8572em;
    &:before {
        content: "";
        display: table;
    }
}


:root {
    --font-family: Helvetica, Arial, sans-serif;
    --scheme-type: light;
    --primary: #222;
    --secondary: #fff;
    --tertiary: #08c;
    --quaternary: #e45735;
    --header-background: #fff;
    --header-primary: #333;
    --highlight: #ffff4d;
    --danger: #e45735;
    --success: #090;
    --love: #fa6c8d;
    --always-black-rgb: 0, 0, 0;
    --primary-rgb: 34,34,34;
    --primary-low-rgb: 232.9,232.9,232.9;
    --secondary-rgb: 255,255,255;
    --tertiary-rgb: 0,136,204;
    --primary-very-low: #f8f8f8;
    --primary-low: #e9e9e9;
    --primary-low-mid: #bdbdbd;
    --primary-medium: #919191;
    --primary-high: #646464;
    --primary-very-high: #434343;
    --header-primary-low: #ebebeb;
    --header-primary-low-mid: #c2c2c2;
    --header-primary-medium: #999;
    --header-primary-high: #707070;
    --header-primary-very-high: #525252;
    --secondary-low: #4d4d4d;
    --secondary-medium: gray;
    --secondary-high: #a6a6a6;
    --secondary-very-high: #ededed;
    --tertiary-low: #d1f0ff;
    --tertiary-medium: #6cf;
    --tertiary-high: #0aadff;
    --tertiary-hover: #069;
    --quaternary-low: #f7cdc2;
    --highlight-low: #ffffca;
    --highlight-medium: #ffffa6;
    --highlight-high: #a6a600;
    --danger-low: #fbe6e1;
    --danger-low-mid: rgba(242,171,154,0.7);
    --danger-medium: #ec8972;
    --danger-hover: #c63c1b;
    --success-low: #b8ffb8;
    --success-medium: #4dff4d;
    --success-hover: #007a00;
    --love-low: #fee9ee;
    --wiki: green;
    --blend-primary-secondary-5: #f9f9f9;
    --primary-med-or-secondary-med: #919191;
    --primary-med-or-secondary-high: #919191;
    --primary-high-or-secondary-low: #646464;
    --primary-low-mid-or-secondary-high: #bdbdbd;
    --primary-low-mid-or-secondary-low: #bdbdbd;
    --primary-or-primary-low-mid: #222;
    --highlight-low-or-medium: #ffffca;
    --tertiary-low-or-tertiary-high: #d1f0ff;
    --tertiary-med-or-tertiary: #6cf;
    --secondary-or-primary: #fff;
    --tertiary-or-white: #08c;
    --facebook-or-white: #4267b2;
    --twitter-or-white: #1da1f2;
    --hljs-comment: #998;
    --hljs-number: #099;
    --hljs-string: #d14;
    --hljs-literal: #458;
    --hljs-tag: #000080;
    --hljs-attribute: #008080;
    --hljs-symbol: #990073;
    --hljs-bg: #f8f8f8;
    --google: #fff;
    --google-hover: #f2f2f2;
    --instagram: #e1306c;
    --instagram-hover: #ac194b;
    --facebook: #4267b2;
    --facebook-hover: #2d477a;
    --cas: #70ba61;
    --twitter: #1da1f2;
    --twitter-hover: #0c85d0;
    --github: #100e0f;
    --github-hover: #463e42;
    --discord: #7289da;
    --discord-hover: #4a67cf;
    --gold: #e7c300;
    --silver: silver;
    --bronze: #cd7f32;
}