: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);
     --bkg-color:hsl(0,0%,100%);

    }
    @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 #fff6
      }
}
 *,::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-image:url("/assets/logos/banner-800x162d.avif");
    background-color: hsl(var(--theme-hue), 100%, 38%);
    background-repeat:no-repeat;
    height:160px;
    background-position:top center;
    min-width: 360px
}
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) 60% 38%);
    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;
}
.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{
    background-color:var(--bkg-color);
    color:var(--font-color);

    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
}

   

 .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:var(--navbar-bkg)*/
        background-color: hsl(var(--theme-hue) 100% 38%);
        width:100%;
        height:48px;
        box-shadow:var(--navbar-shadow-mobile);
        z-index:100
    }
}