:root {
    --gray-31: rgb(31, 31, 31);
    --gray-63: rgb(63, 63, 63);
    --gray-95: rgb(95, 95, 95);
    --gray-127: rgb(127, 127, 127);
    --gray-159: rgb(159, 159, 159);
    --gray-191: rgb(191, 191, 191);
    --gray-223: rgb(223, 223, 223);
    --blue-223: rgb(0, 0, 223);
    --red-63: rgb(63, 0, 0);
    --bright-blue: rgb(61, 174, 233);
    --link-unvisited: rgb(0, 88, 153);
    --link-visited: rgb(0, 64, 128);
}
html, body {
    background-color: white;
    color: var(--gray-31);
}
h1 .highlight {
    background-color: var(--bright-blue);
    color: white;
}
h2, footer  {
    background-color: var(--gray-31);
    color: white;
}
.page-nav {
    background-color: var(--gray-31);
    color: var(--gray-223);
}
.page-nav a:link,
.page-nav a:visited,  
.page-nav a:active,
.page-nav a:focus,
.page-nav a:hover {
    text-decoration: none;
    background-color: var(--gray-31);
    color: var(--gray-223);
    border-color: rgba(0, 0, 0, 0);
}
.page-nav a:focus,
.page-nav a:hover {
    color: white;
    border-color: white;
}
.page a:link,
.page a:visited,
.page a:focus, 
.page a:hover, 
.page a:active {
    text-decoration: none;
    background-color: rgba(0,0,0,0);
    color: var(--link-unvisited);
}
.page a:focus,
.page a:hover {
    color: var(--bright-blue);
    border-bottom: 2px solid;
}
figure {
    border-color: var(--gray-127);
}
strong {
    color: black;
}