.a11y-tool { display: inline-block; padding: 0 0.1em; vertical-align: middle}
.a11y-tool>a{ display: -webkit-box; display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
position:relative;cursor: pointer; width:2em; height:2em; text-align:center; background-color:transparent; border: 1px solid var(--color-warm-pale); text-decoration: none}
.a11y-tool>a:hover{ background-color:var(--color-warm-pale); }

.a11y-tool>a::after, a.skipContent::after{content: ''; position: absolute; right:0; top:100%; color: var(--color-white); background-color: var(--color-warm-darkest); z-index: 10000; font-size: 0.9rem; white-space: nowrap; ;}
.a11y-tool>a:hover::after, .a11y-tool>a:focus::after{content: attr(aria-label); padding: 0.5em 1em; }
a.skipContent:hover::after, a.skipContent:focus::after{content: attr(aria-label); padding: 0.5em 1em; }
a.skipContent{position: absolute;} a.skipContent::after{right: auto; left: 0}

.fontsize-decrease::before{content:'A-'; font-size: 0.6rem; line-height: 0;vertical-align: sub; display: inline-block;} 
.fontsize-increase::before{content:'A+'; font-size: 1.1rem; line-height: 0;vertical-align: sub; display: inline-block;}
body[data-prefersfontsize="0"] .fontsize-decrease {display: none;}
body[data-prefersfontsize="5"] .fontsize-increase {display: none;}

.toggle-prefers-contrast{  }
.toggle-prefers-contrast::before{content:''; display:inline-block; width:1em; height:1em; border-radius:0.5em; border:1px solid; line-height:0; vertical-align: sub;  background: linear-gradient(to right, white 0%, white 50%, currentcolor 50%, currentcolor 100% );}
.prefers-contrast .toggle-prefers-contrast::before{display:inline-block; width:1em; height:1em; border-radius:0.5em; background: linear-gradient(to right, 
hsl(0, 0%, 75%) 0%, hsl(0, 0%, 75%) 50%, hsl(0, 0%, 25%) 50%, hsl(0, 0%, 25%) 100% );}

#widget_a11y {
    position: fixed;
    right: calc(2em + 15px);
    top: 10px;
    z-index: 400;
    color: var(--color-warm-mid);
    font-size:var(--font-size-base);
}
@media (max-width: 600px){ #widget_a11y{right: calc(2em + 35px);} }
#widget_a11y a { color: var(--color-warm-mid)}

header, #search {font-size: var(--font-size-base);}

body[data-prefersfontsize="0"] {--font-size-base:14px}
body[data-prefersfontsize="1"] {--font-size-base:15px}
body[data-prefersfontsize="2"] {--font-size-base:16px}
body[data-prefersfontsize="3"] {--font-size-base:17px}
body[data-prefersfontsize="4"] {--font-size-base:18px}
body[data-prefersfontsize="5"] {--font-size-base:19px}