body.a11y-active {
    position: absolute;
    left: 0;
    top: 0;
}

body.a11y-big-text {
    font-size: 200%;
}

body.a11y-small-text * {
    font-size: 90%;
}

body.a11y-grayscale {
    filter: grayscale(100%);
}

body.a11y-high-contrast {
    background: #000 !important;
    color: #fff !important;
}

body.a11y-high-contrast * {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.a11y-invert {
    filter: invert(1) hue-rotate(180deg);
}

body.a11y-links a {
    text-decoration: underline !important;
}

body.a11y-readable-font {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    letter-spacing: 0.5px;
    line-height: 1.6;
}

div.a11y {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 10vh;

    width: 50px;
    height: 50px;
    padding: 15px;

    background-origin: content-box;
    background-image: url("/assets/a11y.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--blogee-blog-primary);
}

div.a11y > * {
    display: none;
}

div.a11y:hover > * {
    font-size: 20px;
    display: block;

    width: 100%;
    color: white;
    background: none;
    border: 2px solid black;
}

div.a11y:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: fit-content;
    height: fit-content;
    background-image: none;
    gap: 15px;
}