.openAccessibility {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 999998;
    padding: calc(var(--padding) / 6) calc(var(--padding) / 3);
    border: 2px solid var(--gridcolor);
    background-color: var(--gridcolor);
    box-shadow: var(--mainshadow);
}

.openAccessibility i {
    font-size: 14px;
}

.openAccessibility i.fa-user {
    font-size: 20px;
    color: var(--bgcolor)
}

.openAccessibility i.fa-cog {
    transform-origin: center center;
    animation-name: rotateGear;
    position: absolute;
    animation-play-state: paused;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 2s;
    top: 50%;
    left: 50%;
    rotate: 0deg;
    color: var(--static-seccolor)
}

.openAccessibility:hover i.fa-cog {
    animation-play-state: running;
}

@keyframes rotateGear {
    0% {
        rotate: 0deg
    }
    100% {
        rotate: 360deg
    }
}

.accessibilitymenu {
    position: fixed;
    z-index: 999997;
    padding: var(--padding);
    background-color: var(--gridcolor);
    box-shadow: var(--mainshadow);
    height: 50vh;
    left: var(--padding);
    right: var(--padding);
    bottom:-50vH;
    will-change: bottom;
    transition: bottom ease .3s;

}

.accesibilitycontent {
    inset: var(--padding);
    position: absolute;
    overflow: auto;
    scrollbar-width: none;
    bottom: 0;
}

.accessibilitymenu h4,
.accessibilitymenu h5,
.accessibilitymenu h6,
.accessibilitymenu p,
.accessibilitymenu {
    color: var(--bgcolor)
}

.accessibilitymenu.active {
    bottom:0;
}
.accessibilitymenu a.active {
    font-weight: 900;
}


html.marklinks a {
    text-decoration: underline !important;
    background-color: rgba(255, 255, 0, .14);
}

html.greyscale .colorboxarea,
html.greyscale img, html.greyscale .hasbgimage {
    filter: grayscale(1)
}

html.greyscale body.darkmode {
    --maincolor: #999 !important;
    --seccolor: #ccc !important;
    --static-maincolor: #999 !important;
    --static-seccolor: #ccc !important;
    --static-black: #000 !important;
    --static-black: #000 !important;
    --bgcolor: rgb(0, 0, 0);
    --bgcolor-86: rgba(0, 0, 0, .86);
    --bgcolor-65: rgba(0, 0, 0, .65);
    --bgcolor-43: rgba(0, 0, 0, .43);
    --bgcolor-14: rgba(0, 0, 0, .14);
    --bgcolor-0: rgba(0, 0, 0, 0);
}

html.greyscale body.lightmode {
    --maincolor: #999 !important;
    --seccolor: #ccc !important;
    --static-maincolor: #999 !important;
    --static-seccolor: #ccc !important;
    --static-black: #000 !important;
    --static-black: #000 !important;
    --bgcolor: rgb(255, 255, 255);
    --bgcolor-86: rgba(255, 255, 255, .86);
    --bgcolor-65: rgba(255, 255, 255, .65);
    --bgcolor-43: rgba(255, 255, 255, .43);
    --bgcolor-14: rgba(255, 255, 255, .14);
    --bgcolor-255: rgba(255, 255, 255, 0);
}

html.greyscale code {
    color: #999 !important;
}

html.greyscale code span {
    color: #ccc;
}

html.greyscale .bubbles {
    filter: grayscale(1) blur(35px)
}

html.marklinks.greyscale a {
    background-color: rgba(155, 155, 155, .5);
}


html.reducedmotion .tilt,
html.reducedmotion *:has(> .tilt) {
    perspective: 0 !important
}

html.reducedmotion .tilt {
    transform: none !Important
}

html.negativecontrast body {
    --maincolor: yellow !important;
    --seccolor: yellow !important;
    --static-white: #fff !important;
    --static-maincolor: #000 !important;
    --static-seccolor: #fff !important;
    --static-black: #000 !important;
    --bgcolor: #000 !important;
    --gridcolor: #fff !important;
    --bggridcolor: var(--bgcolor);
    --textcolor: yellow !important;
    --bgcolor-86: var(--bgcolor);
    --bgcolor-65: var(--bgcolor);
    --bgcolor-43: var(--bgcolor);
    --bgcolor-14: transparent !important;
    --bgcolor-0: transparent !important;
    --gridcolor-86: var(--gridcolor);
    --gridcolor-65: var(--gridcolor);
    --gridcolor-43: var(--gridcolor);
    --gridcolor-14: var(--gridcolor);
    background-image: none !important;
}

html.negativecontrast body .bubbles {
    display: none !important
}

html.negativecontrast body .hasbgimage,
html.negativecontrast body img {
    filter: contrast(1.5)
}

html.highcontrast .largehead,
html.negativecontrast .largehead {
    display: none
}

html.highcontrast .biglogo svg *,
html.highcontrast .ak86logo svg * {
    fill: black !important
}

html.negativecontrast .biglogo svg *,
html.negativecontrast .ak86logo svg * {
    fill: white !important
}

html.highcontrast #ak86back {
    mix-blend-mode: unset !important
}

html.highcontrast body {
    --maincolor: lime !important;
    --seccolor: lime !important;
    --static-white: #000 !important;
    --static-maincolor: #fff !important;
    --static-seccolor: #000 !important;
    --static-black: #fff !important;
    --bgcolor: #fff !important;
    --gridcolor: #000 !important;
    --bggridcolor: var(--bgcolor);
    --textcolor: lime !important;
    --bgcolor-86: var(--bgcolor);
    --bgcolor-65: var(--bgcolor);
    --bgcolor-43: var(--bgcolor);
    --bgcolor-14: transparent !important;
    --bgcolor-0: transparent !important;
    --gridcolor-86: var(--gridcolor);
    --gridcolor-65: var(--gridcolor);
    --gridcolor-43: var(--gridcolor);
    --gridcolor-14: var(--gridcolor);
    background-image: none !important;

}

html.highcontrast body .bubbles {
    display: none !important
}

html.highcontrast body .hasbgimage,
html.highcontrast body img {
    filter: contrast(1.5)
}

html.highcontrast .themetoggle,
html.negativecontrast .themetoggle {
    display: none
}

html.increasetext body {
    --mainfontFactor: 1.5;
}

html.decreasetext body {
    --mainfontFactor: 0.75;
}

.keyblock {
    border: 1px solid var(--bgcolor);
    position: relative;
    float: left;
    border-radius: 3px;
    width: 43px;
    aspect-ratio: 1;
}

.keyblock:after {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 4px;
    border: 1px solid var(--bgcolor);
    opacity: .43;
}

.keyblock .letter {
    position: absolute;
    left: 12%;
    top: 8%;
    color: var(--bgcolor);
    font-size: 12px;
}

.accessibilitylink {
    padding: 10px 15px;
    border: 1px solid var(--bgcolor);
    color: var(--bgcolor);
    text-decoration: none;
    float: left;
    white-space: nowrap;
    margin-bottom: 14px;
}

@media (pointer: coarse) {
    .keyboardaccess {
        display: none
    }
}

@media (hover: none) {
    .keyboardaccess {
        display: none
    }
}