#skip {
     position:absolute;
     left: -200px;
     background-color: var(--skip-background-color);
}
 #skip:focus {
     translate:200px;
}
 header > div:first-of-type{
     display:flex;
     justify-content: space-around;
}
/* header:first-of-type{
     border-top-left-radius:10px;
     border-top-right-radius:10px;
}
 main{
     border-bottom-left-radius:10px;
     border-bottom-right-radius:10px;
}
 */
 [data-theme=light], :root:not([data-theme=dark]) {
    /* --body-background-color: #E6CD8B;
     */
     --body-background-color: #FFF;
     --skip-background-color: #FFF;
     --icon-chevron-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
 [data-theme=dark] {
     --background-color: #222222;
     --skip-background-color: #000;
}
 body {
     background-color: var(--body-background-color);
}
 .container, .container-fluid {
     background-color: var(--background-color);
}
 .container-fluid {
     padding-left: 0;
     padding-right: 0;
}

/*Added by KD*/
 .container-fluid-footer {
     padding-left: 0;
     padding-right: 0;
     place-items: center;
}

 a:is([aria-current], :hover, :active, :focus), [role=link]:is([aria-current], :hover, :active, :focus) {
     outline: thin solid var(--primary-hover);
}
 a:focus, [role=link]:focus {
     outline: thin solid var(--primary-hover);
}
 nav > ul {
     /*
    background-color: #62687F;
     */
     background-color: #2C5D52;
     width:100%;
     justify-content:space-evenly;
}
 nav > ul>li>a, nav > ul>li>details>summary[role="link"],nav > ul>li>details>summary[role="link"]:focus{
     color:#fff;
}
 nav > ul>li>a:focus, nav > ul>li>details>summary[role="link"]:hover, nav > ul>li>a:focus, nav > ul>li>details>summary[role="link"]:hover,nav > ul>li>a:is([aria-current], :hover, :active, :focus),nav > ul>li>details>summary[role="link"]:focus{
     outline: thin solid white;
}
 nav > details summary::after{
     background-image: var(--icon-chevron--inverse);
}
 details[open] > summary::after {
     transform: rotate(-180deg);
}
 nav details[role=list] summary::after{
     background-image:var(--icon-chevron-inverse);
}