@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* INITIALIZE ENVIRONMENT */
:root {
    --color-main-darkBlue:#032B5C;
    --color-systemText:#666666;
    --color-errorText:#FF0000;

    --color-border-standard: #9A9A9A;  /* typically used around images */
    --color-border-light: #E3E3E3;     /* used for things like the fieldset border */

    --radius-standard:4px;  /* standard border radius */
    --radius-button:25px;   /* more button like */

    --font-standard:Verdana, Arial, sans-serif;
    --font-heading:Oswald, var(--font-standard);
}


/* GENERAL STYLES */
html { font-family:var(--font-standard); font-size:100%; }  /* used as the baseline for rem (root element) */
body { margin:0; min-width:230px; padding:0; }
h1, h2, h3 { font-family:var(--font-heading); font-weight:400; letter-spacing:0.02em; line-height:1.2; }
a { color:#0000FF; overflow-wrap:break-word; }
a:hover, a:focus-visible { text-decoration:none; }
a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
address { font-style:normal; }
.extIcon { fill:currentColor; padding-left:5px; }
.addInfo { font-size:0.9rem; font-style:italic; }
.systemText, .systemText td { color:var(--color-systemText); font-style:italic; }
.errorText { color:var(--color-errorText); }
.nowrap { white-space:nowrap; }
.hide-visually { border:0; clip:rect(0, 0, 0, 0); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; }  /* hide content meant for screen readers */



/* WEBSITE HEADER */
.pgHeader { background:rgba(3, 43, 92) url("https://ndstate.co1.qualtrics.com/CP/Graphic.php?IM=IM_SQdhW4hu69XUtur") no-repeat right 20% bottom 40%; background-size:cover; color:#FFFFFF; display:flex; flex-direction:column; font-family:var(--font-heading); justify-content:center; min-height:420px; padding:10px; position:relative; text-align:center; }
.pgHeader .container { background-color:rgba(3, 43, 92, 0.7); padding:1rem 0.5rem; }
.pgHeader h1 { font-optical-sizing:auto; font-size:2rem; line-height:1.4; }
.pgHeader h1 strong { display:block; font-size:3rem; line-height:1.1; }
.pgHeader p { margin:1rem 0 0; }


/* MAIN WEBSITE CONTENT */
main { margin:2rem; }
main h1 { font-size:2rem; font-weight:500; margin:0 0 1rem; }
main h2 { font-size:1.8rem; margin:2rem 0 1rem; }
main h3 { font-size:1.5rem; margin:2rem 0 1rem; }
main p { line-height:1.4; }
main li { line-height:1.4; margin-bottom:0.25rem; }


/* WEBSITE FOOTER */
footer { border-top:1px solid #CCCCCC; margin:2rem; margin-top:3rem; }
footer a { font-size:0.9rem; font-style:italic; }



/* SPLIT CONTENT INTO COLUMNS */
.layout_split { clear:both; display:grid; gap:2rem 40px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); margin-top:1rem; overflow:auto; }
.layout_split > div > :first-child { margin-top:10px; }



/* MESSAGE BOX (typically used to display database connection / query errors) */
main .msgBox { background-color:#FEFDFA; border:1px solid #000000; border-width:1px 4px; padding:1.5rem; margin:2.5rem 1rem; font-size:1.2rem; }
main .msgBox p { margin:0; font-weight:bold; }
main .msgBox p + p { margin-top:1rem; }
main .msgBox .normal { color:#000000; font-style:normal; font-weight:normal; }
main .msgBox ul { margin:0.5rem 0 0 45px; padding:0; }
main .msgBox li { margin:0; }
main .msgBox li + li { margin-top:0.25rem; }
main .msgBox.error p { color:var(--color-errorText); }                             /* custom styling -- msgBox also flagged as an error box */
main .msgBox.normal p { color:#000000; font-style:normal; font-weight:normal; }  /* custom styling -- msgBox also flagged as a normal box */