:root {
    --blue:        #2a5fa5;
    --blue-dark:   #1e4a85;
    --blue-dim:    rgba(42, 95, 165, 0.12);
    --blue-border: rgba(42, 95, 165, 0.25);

    --slate:      #4a5568;
    --slate-dark: #2d3748;

    --index-author-bg: #f8f9fb;

    --bg:           #f0f2f5;
    --bg-white:     #ffffff;
    --bg-raised:    #e8eaed;
    --border:       #d0d4da;
    --border-light: #e4e6ea;

    --text:       #1a1f2e;
    --text-mid:   #4a5568;
    --text-dim:   #718096;
    --text-light: #a0aec0;

    --danger:     #c53030;
    --danger-dim: rgba(197, 48, 48, 0.1);
    --success:    #276749;

    --radius:    4px;
    --radius-sm: 2px;
    --radius-lg: 6px;

    --font:      Arial, Helvetica, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    --max-width: 1100px;
    --pad-h:     16px;
    --header-h:  72px;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--blue-dark);
}

h1,
h2,
h3,
h4 {
    font-weight: bold;
    line-height: 1.3;
    color: var(--text);
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }

p {
    margin-bottom: 8px;
}

p:last-child {
    margin-bottom: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

::selection {
    background: var(--blue-dim);
    color: var(--text);
}