:root{
     --font-sans:system-ui,sans-serif;
     --ff-body:var(--font-sans);
     --ff-heading:var(--font-sans);
     --fs-header-h1:clamp(1.5rem,5vw,2rem);
     --fs-header-date:clamp(.75rem,3vw,1.2rem);
     --font-weight:400;
     --font-lineheight:1.375;
     /*--font-color:hsl(0,0%,0%);*/
     --theme-hue:266; /*the color theme orinally 173 */
     --navbar-bkg:#f2f2f2;
     --navbar-font:hsl(0,0%,0%);
     --navbar-hover:#444;
     --navbar-link-hover:#f2f2f2;
     --navbar-drop-bkg:hsl(var(--theme-hue),100%,30%);
     --navbar-drop-font:#fff;
     --navbar-drop-hover:#444;
     --navbar-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     --navbar-shadow-mobile:0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
     

    }
    @media (prefers-color-scheme: dark){
      :root{
          /*--font-color:hsl(0,0%,100%);
          --bkg-color:hsl(0,0%,20%);*/
          --body-outline:hsl(0,0%,100%);
          --navbar-shadow:0 4px 8px 0 #ffffff80 0 6px 20px 0 #fff6;
          --navbar-shadow-mobile:0 -4px 8px 0 #ffffff80 0 -6px 20px 0 #fffff6
      }
}
 *,::before,::after{
    box-sizing:border-box
}

p{
    margin-block:1rem
}
html {scrollbar-gutter: stable;}
body{
    font-size:1rem;
    line-height:var(--font-lineheight);
    font-family:var(--ff-body);
    height:100%;
    font-weight:var(--font-weight);
    scroll-behavior:smooth;
    margin: auto;
    max-width:800px;
    padding-block-end:2rem;
    color:var(--font-color);
    background-color:var(--bkg-color)
}
 .header-center{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: hsl(var(--theme-hue), 55%, 35%);
    background-repeat:no-repeat;
    height:160px;
    background-position:top center;
    min-width: 360px;
    /*background-image:url("/assets/logos/banner-800x162e.avif");*/
    /*background-image:url(/assets/logos/19ihc-logo4.avif);*/
    /*background-image:url(/assets/logos/19ihc-logo3.avif);*/
    background-image:url("/assets/logos/banner-icons-800x162.avif");
}
h1{
    text-align:center;
    color:#fff;
    line-height:1;
    font-size:var(--fs-header-h1);
    text-shadow:0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1),-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    ;
}
h1 > time{
    font-size:var(--fs-header-date);
    line-height:.8
}
.text-center{
    text-align:center
}
.p1{
    padding:1rem;
}
 .navbar{
    display:flex;
    justify-content:space-evenly;
    background-color: hsl(var(--theme-hue) 55% 35%);
    box-shadow:var(--navbar-shadow)
}
 .navbar a{
    color:white;
    background-color: hsl(var(--theme-hue), 100%, 22%);
    padding:14px 16px;
    text-decoration:none;
    font-weight: bold;
}
 .dropdown .dropbtn{
    font-size:16px;
    border:none;
    font-weight: bold;
    color:white;
    padding:14px 16px;
    background-color: hsl(var(--theme-hue) 100% 22%);
    font-family:inherit;
    margin:0;
    text-wrap: nowrap;
}
.navbar a:hover,.dropdown:hover .dropbtn{
    background:var(--navbar-drop-hover);
    color:var(--navbar-link-hover);
    z-index:100
}
.dropdown-content{
    display:none;
    position:absolute;
    background-color:var(--navbar-drop-bkg);
    min-width:160px;
    box-shadow:0 8px 16px 0 #0003;
    z-index:1
}
.dropdown-content a{
    color:var(--navbar-drop-font);
    padding:12px 16px;
    text-decoration:none;
    display:block;
    text-align:left
}
.dropdown-content a:hover{
    background-color:var(--navbar-link-hover);
    color:var(--navbar-drop-hover)
}
.dropdown:hover .dropdown-content{
    display:block
}
/*dropdown arrow*/
.caret{
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid currentcolor;
    display:inline-block;
    height:0;
    margin-left:2px;
    vertical-align:middle;
    width:0
}
 .active{
    
    outline:2px solid white;
    outline-offset:-5px
}

.drop-item {font-size: 1rem;padding: 14px 16px 14px 0;background-color: #007063;width:100%;border:none; font-weight: bold; color:white}
main{
    padding-inline: 5px;
}
@supports(position:sticky){
    .sticky-nav{
        height:50px;
        position:-webkit-sticky;
        position:sticky;
        top:0;
        z-index:200
    }
}

.dropdown-content > a[target="_blank"]:link,.dropdown-content > a[target="_blank"]:visited{
    color:#fff
}
.dropdown-content > a[target="_blank"]:hover,.dropdown-content > a[target="_blank"]:focus{
    color:#000
}
/*light-dark theme*/
:root {
    color-scheme: light dark;
    --nav-icon: light-dark(#000000, #ffffff);
    --bkg-color: light-dark(#ffffff, #1f1f1f);
  }
  body {background-color: var(--bkg-color);}
  .svg-mail {stroke: light-dark(#1a1a1a, #ffffff); fill: none;}
  /* Theme-specific overrides when forced via data-theme attribute */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  [data-theme="light"] #sun { transform: scale(.5); }
  [data-theme="dark"] #sun-beams { opacity: 0; }

  .theme-toggle.skylight {
    background: none;
    border-radius: 50%;
    border: 10px solid transparent;
  }
  #moon.skylightt {
    fill: var(--nav-icon);
    stroke: none;
  }
  #sun.skylight {
    fill: var(--nav-icon);
    stroke: none;
    transition: transform .5s cubic-bezier(.25,0,.2,1);
    transform-origin: center center;
  }
  #sun-beams.skylight {
    stroke: var(--nav-icon);
    stroke-width: 2px;
    transform-origin: center center;
  }
  button:hover, button:focus { cursor: pointer; }
   

 .mobile{
    display:none
}
 @media only screen and (max-width: 750px){
    .caret,.hide{
        display:none
    }
    .mobile{
        position:fixed;
        bottom:0;
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        background-color: hsl(var(--theme-hue) 100% 38%);
        width:100%;
        height:48px;
        box-shadow:var(--navbar-shadow-mobile);
        z-index:100
    }
}