.site-header {
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;
padding:10px;
background-color:#121212;
color:#fff
}

.visually-hidden{
  position:absolute;clip:rect(1px,1px,1px,1px);
  padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;
}

.site-header a {
color:#FFD700
}

.left-section,.center-section,.right-section {
flex:1;
text-align:center;
padding:5px
}

.center-section .images {
display:flex;
justify-content:center;
margin-bottom:10px
}

.center-section .images img,.center-section > img {
width:120px;
height:auto
}

.portal-link,.accessibility-link {
display:inline-block;
padding:.5rem;
margin:0 .5rem
}

.portal-link img {
width:44px;
height:44px
}

.accessibility-link {
font-size:1rem;
font-weight:bold;
color:#FFD700;
text-decoration:none;
transition:color .3s ease,background-color .3s ease;
background-color:transparent;
border-radius:4px
}

.accessibility-link:hover,.accessibility-link:focus {
color:#FFC300;
text-decoration:underline
}

.portal-link:hover img,.portal-link:focus img {
outline:2px solid #FFD700;
outline-offset:2px
}

/* NAV BASE */
nav {
  background-color:#0077B6;
  padding:.625em 1.25em;
}

/* Support BOTH patterns: details/summary and checkbox hack */
nav details { display:block; }
nav summary { list-style:none; cursor:pointer; user-select:none; }
nav summary::-webkit-details-marker { display:none; }
nav summary { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
nav summary::marker { content: ""; }                 /* Firefox */
.hamburger:focus { outline:2px solid #FFD700; outline-offset:2px; }
.hamburger:hover { background:#444; }

/* Menu default: hidden on narrow screens */
.menu {
  list-style:none;
  margin:0;
  padding:0;
  background:#333;
  text-align:center;
  display:none;
}

/* Show menu when checkbox is checked (old pattern still works) */
input[type="checkbox"]:checked + .hamburger + .menu {
  display:block !important;
}

/* Show menu when <details> is open (new pattern) */
nav details[open] .menu {
  display:block !important;
}

/* Hamburger button */
.hamburger {
  display:block;
  font-size:1.875em;
  cursor:pointer;
  text-align:center;
  padding:.625em;
  background:#333;
  color:white;
}
.hamburger:focus { outline:2px solid #FFD700; outline-offset:2px; }

/* Menu links */
.menu li a {
  display:inline-block;
  padding:.625em 1.25em;
  color:white;
  text-decoration:none;
  transition:background-color .5s ease,color .5s ease,border .5s ease;
  border-radius:50%;
  border:2px solid transparent;
}
.menu li a:hover,.menu li a:focus {
  background-color:#005f8a;
  text-decoration:none;
  color:#FFD700;
  border:2px solid #FFD700;
  outline:none;
}

body {
font-family:monospace,sans-serif;
color:#333;
line-height:1.2;
margin:0;
padding:0;
background-color:#f4f4f4
}

h1 {
font-size:28px;
color:#4CAF50;
margin-top:20px;
margin-bottom:10px;
text-align:center
}

main h2 {
font-size:28px;
color:#005f8a;
margin-top:20px;
margin-bottom:10px;
text-align:center
}

main p {
text-align:left;
line-height:1.2
}

main ul {
list-style-type:none;
padding:0;
margin:20px auto;
max-width:800px
}

main ul li {
font-size:18px;
margin-bottom:10px;
padding-left:10px;
position:relative
}

main ul li::before {
content:"•";
color:#0077B6;
font-size:24px;
position:absolute;
left:0;
top:0
}

main a {
color:#0056b3;
text-decoration:none;
font-weight:bold
}

main a:hover {
text-decoration:underline;
color:#003d80
}

blockquote {
font-style:italic;
background:#F9F9F9;
border-left:5px solid #005f8a;
margin:20px;
padding:10px 20px;
color:#4D4D4D
}

cite {
display:block;
text-align:right;
color:#005f8a;
font-style:normal;
margin-top:10px
}

#disclaimer {
border:2px solid #0077B6;
padding:20px;
margin:20px;
background-color:#fff;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

#disclaimer h2 {
text-align:center;
font-size:22px;
color:#333
}

#disclaimer p {
font-size:16px;
color:#555
}

.info-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
justify-content:center;
list-style:none;
padding:0;
margin:2rem auto;
max-width:1200px
}

.info-grid li {
display:flex;
align-items:center;
background:#f9f9f9;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
padding:1rem;
text-align:center;
transition:background-color .2s ease,transform .2s ease
}

.info-grid li:hover {
background-color:#e6f4fa;
transform:scale(1.02)
}

.info-grid img {
width:100%;
max-width:150px;
height:auto;
border-radius:8px;
margin-bottom:.5rem
}

.info-grid span {
font-size:1rem;
color:#333;
font-weight:bold
}

.info-grid a {
text-decoration:none;
color:inherit
}

.info-grid li.text-only { background:transparent; box-shadow:none; padding:.5rem; text-align:left; }
.info-grid li.text-only:hover { background:none; transform:none; }

@media (max-width: 600px) {
.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

.site-footer {
background-color:#121212;
color:#fff;
padding:1.5rem;
text-align:center
}

.site-footer ul {
list-style:none;
padding:0;
margin:1rem 0
}

.site-footer ul.footer-links {
margin-bottom:1.5rem
}

.site-footer li {
margin:.5rem 0
}

.site-footer a {
color:#FFD700;
text-decoration:none;
transition:color .3s
}

.site-footer a:hover {
color:#FFC300
}

.site-footer .footer-navigation li {
display:inline-block;
margin:0 .5rem
}

.site-footer .footer-navigation li a {
font-weight:bold
}

@media (prefers-color-scheme: dark) {
body {
background-color:#000000;
color:#ffffff
}

blockquote {
background-color:#222222;
border-left:5px solid #005f8a;
color:#CCCCCC
}

cite {
color:#009ACD
}

#disclaimer {
background-color:#1E1E1E;
border:2px solid #005f8a;
color:#E0E0E0
}

#disclaimer h2 {
color:#FFFFFF
}

#disclaimer p {
color:#CCCCCC
}

.info-grid li {
background-color:#262626;
color:#FFFFFF
}

.info-grid span {
color:#FFD700
}

.info-grid li:hover {
background-color:#2B2B2B
}

.info-grid img {
border:2px solid #005f8a
}
}

@media (prefers-color-scheme: light) {
body {
background-color:#ffffff;
color:#000000
}

button,a {
border-color:#000000
}

button:focus,a:focus {
outline:2px dashed #000000
}
}

@media (forced-colors: active) {
  .menu li a { border-color: ButtonText; }
  .hamburger { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
* {
animation:none;
transition:none
}
}

@media print {
body {
font-size:12pt;
color:black;
background:none
}
}

@media (max-width: 2em) {
body {
font-size:.625rem;
max-width:2rem;
padding:0 .5rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 2.063em) and (max-width: 5.25em) {
body {
font-size:.75rem;
max-width:4rem;
padding:0 .5rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 5.313em) and (max-width: 15em) {
body {
font-size:.8125rem;
max-width:14rem;
padding:0 .75rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 15.063em) and (max-width: 20em) {
body {
font-size:.9375rem;
max-width:16rem;
padding:0 1rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 20.063em) and (max-width: 23.438em) {
body {
font-size:.9375rem;
max-width:18rem;
padding:0 1rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 23.5em) and (max-width: 30em) {
body {
font-size:1.0625rem;
max-width:24rem;
padding:0 1rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 30.063em) and (max-width: 37.5em) {
body {
font-size:1.0625rem;
max-width:30rem;
padding:0 1.125rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 37.563em) and (max-width: 48em) {
body {
font-size:1.0625rem;
max-width:46rem;
padding:0 1.125rem
}

.info-grid {
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.info-grid img {
max-width:120px
}

.info-grid span {
font-size:.9rem
}
}

@media (min-width: 48.063em) and (max-width: 64em) {
body {
font-size:1.125rem;
max-width:58rem;
padding:0 1.125rem
}

.content-container {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))
}

.hamburger {
  display:none
}


.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}

@media (min-width: 64.063em) and (max-width: 80em) {
body {
font-size:1.25rem;
max-width:74rem;
padding:0 1.125rem
}

.hamburger {
  display:none
}


.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}

@media (min-width: 80.063em) and (max-width: 90em) {
body {
font-size:1.375rem;
max-width:82rem;
padding:0 1.125rem
}

.hamburger {
  display:none
}


.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}

@media (min-width: 90.063em) and (max-width: 120em) {
body {
font-size:1.5rem;
max-width:106rem;
padding:0 1.125rem
}

.hamburger {
  display:none
}


.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}

@media (min-width: 120.063em) and (max-width: 160em) {
body {
font-size:1.5rem;
max-width:110rem;
padding:0 1.125rem
}

.content-container {
grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))
}

.hamburger {
  display:none
}


.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}

@media (min-width: 160.063em) {
body {
font-size:1.5rem;
max-width:110rem;
padding:0 1.125rem
}

.content-container {
grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))
}

.hamburger {
  display:none
}

.menu {
display:block;
background:none
}

.menu li {
display:inline-block
}

.menu li a {
padding:15px;
border-radius:50%;
border:2px solid transparent
}
}