:root {
    --primary-dark: #002637;
    --secondary-dark: #006a82;
    --secondary-mid: #6e8433;
    --primary-light: #fd9700;
    --secondary-light: #ffc532;
    --body: #fdf8ee;
    --body2: #ece4d0;

    --grad1: #002637;
    --grad2: #00374e;
    --grad3: #004765;
    --grad4: #005566;
    --grad5: #006a82;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--body);
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    color: var(--primary-dark);
}
h1, h2, h3, h4, h5, h6 {font-family: Figtree;}
#share {cursor:pointer; display:none;}

#headergradient {
    background: linear-gradient(153deg, var(--primary-dark) 0%, var(--secondary-dark) 75%, var(--secondary-mid) 120%);
    background-size: 150%;
    clip-path: ellipse(300% 100% at 35% 0%);
}
.cl-header {
    background: linear-gradient(125deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    color:var(--body);
    box-shadow: rgba(var(--body), 0.8) 0px 13px 27px -5px, rgba(var(--body), 0.8) 0px 8px 16px -8px;

    box-shadow: color-mix(in srgb, var(--body) 100%, transparent) 0px 8px 30px -8px;
}
.cl-footer {
    background: linear-gradient(125deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    color:var(--body);
}

@keyframes headerClipPath {
    0%   { clip-path: ellipse(300% 100% at 0% 0%);   background-position:0% 25%; }
    100% { clip-path: ellipse(300% 100% at 100% 0%); background-position:100% 75%; }
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        #headergradient {
            animation: headerClipPath;
            animation-timeline: scroll();
        } 
    }
}

.cl-small-caps {font-variant: small-caps;}
.cl-primaryd-text {color: var(--primary-dark);}
.cl-secondaryd-text {color: var(--secondary-dark);}
.cl-primaryl-text {color: var(--primary-light);}
.cl-secondaryl-text {color: var(--secondary-light);}
.cl-body-text {color: var(--body);}

.cl-primaryd-texth {color: var(--primary-dark);}
.cl-primaryd-texth:hover {color: var(--secondary-dark);}
.cl-secondaryd-texth {color: var(--secondary-dark);}
.cl-secondaryd-texth:hover {color: var(--primary-dark);}
.cl-primaryl-texth {color: var(--body);}
.cl-primaryl-texth:hover {color: var(--secondary-light);}
.cl-secondaryl-texth {color: var(--secondary-light);}
.cl-secondaryl-texth:hover {color: var(--primary-light);}

.cl-primaryd-texth,
.cl-secondaryd-texth,
.cl-primaryl-texth,
.cl-secondaryl-texth {transition: color 250ms linear;}

.cl-body2 {background-color: var(--body2);}

.cl-primaryd {background-color: var(--primary-dark);}
.cl-secondaryd {background-color: var(--secondary-dark);}
.cl-primaryl {background-color: var(--primary-light);}
.cl-secondaryl {background-color: var(--secondary-light);}

.cl-primarydh {background-color: var(--primary-dark); color:var(--body);}
.cl-primarydh:hover {background-color: var(--secondary-dark);}
.cl-secondarydh {background-color: var(--secondary-dark); color:var(--body);}
.cl-secondarydh:hover {background-color: var(--primary-dark);}
.cl-primarylh {background-color: var(--primary-light); color: var(--primary-dark);}
.cl-primarylh:hover {background-color: var(--secondary-light);}
.cl-secondarylh {background-color: var(--secondary-light); color: var(--primary-dark);}
.cl-secondarylh:hover {background-color: var(--primary-light);}

.cl-primarydh,
.cl-secondarydh,
.cl-primarylh,
.cl-secondarylh {transition: background-color 250ms linear;}

.cl-headerfont {
    font-family: Figtree, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    font-weight: 700;
}

ul.checklist {list-style: none;}
ul.checklist li span::before {content: "\2714"; position:relative; top:0.3rem; padding-right: 0.5rem; font-size: 1.5rem; color: var(--secondary-dark);}