/**
 * Foundation
 *
 * Global design tokens, reset rules, accessibility helpers and basic elements.
 */
:root {
    --page-bg: #b7c9df;
    --navy: #18365f;
    --navy-dark: #0d2545;
    --blue: #315f91;
    --cream: #fffdf0;
    --yellow: #fff2a8;
    --text: #101820;
    --link: #0000cc;
    --visited: #551a8b;
    --danger: #b80000;
    --border-muted: #9ca8b3;
    --content-bg: #ffffff;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 14px;
    color: var(--text);
    background:
        radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.35) 1px, transparent 1px) 0 0 / 20px 20px,
        var(--page-bg);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

a {
    color: var(--link);
    text-decoration: underline;
}

a:visited {
    color: var(--visited);
}

a:hover,
a:focus {
    color: var(--danger);
    background: #ffff99;
}

img {
    max-width: 100%;
    height: auto;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    top: 8px;
    left: 8px;
    z-index: 99999;
    width: auto;
    height: auto;
    padding: 10px;
    clip: auto;
    background: #ffffff;
}