:root {
    /* --- Core Colors --- */
    --bgColor: rgb(15,40,100);
    --textColor: white;

    /* --- Link Colors --- */
    --linkColor: #87CEEB;       /* Sky Blue */
    --linkHover: #FFFFFF;       /* White */
}

body {
    background-color: var(--bgColor);
    color: var(--textColor);
    font-family: Calibri, 'Carlito', sans-serif;
    font-size: 18px;
    margin: 8px;               /* Standard browser margin */
}

/* Global Link Styles */
a, a:visited {
    color: var(--linkColor);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

a:hover {
    color: var(--linkHover);
    text-decoration: underline;
    cursor: pointer;
}

/* Lists — kept in step with the left-floating control-column figure.
   By default the ::marker sits OUTSIDE the line box, and a float shifts line boxes but not the
   list's own indent. So a list beside the figure had its numbers pushed out to the LEFT of the
   surrounding paragraph, while an identical list clear of the figure showed them indented to the
   right of it — same markup, opposite look, and the break point moved with the window width.
   Putting the marker INSIDE the line box, with no list indent of its own, makes the number start
   exactly where the paragraph text starts, in both cases. Text still flows under the figure, so
   no space is wasted. (`display: flow-root` also equalises it, but strands the whole list in the
   narrow column beside the figure and leaves a large blank block below it.) */
ol, ul {
    padding-inline-start: 0;
    list-style-position: inside;
}

/* Emphasis tags used in the guide text */
i {
    color: #FFD700;            /* Gold */
    font-weight: bold;
}

e {
    color: rgb(200,255,200);   /* Light green */
    font-weight: bold;
}

red {
    color: rgb(255, 0, 0);
    font-weight: bold;
}

green {
    color: rgb(0, 255, 0);
    font-weight: bold;
}