:root {
    --accessibility-background: black;
    --accessibility-text: white;
    --accessibility-highlight: yellow;
    --accessibility-blue: royalblue;
}

/* Fitler */
html[accessibility-filter="Grayscale"] {
    filter: grayscale(1) !important;
}

html[accessibility-filter="HighContrast"] * {
    background-image: initial !important;
    background-color: initial !important;
    border-color: var(--accessibility-highlight) !important;
    color: var(--accessibility-highlight) !important;
    box-shadow: none !important;
}

html[accessibility-filter="HighContrast"],
html[accessibility-filter="HighContrast"] section,
html[accessibility-filter="HighContrast"] div,
html[accessibility-filter="HighContrast"] img {
    background-color: black !important;
    color: var(--accessibility-highlight) !important;
}

html[accessibility-filter="HighContrast"] h1,
html[accessibility-filter="HighContrast"] h2,
html[accessibility-filter="HighContrast"] h3,
html[accessibility-filter="HighContrast"] h4,
html[accessibility-filter="HighContrast"] h5,
html[accessibility-filter="HighContrast"] h6,
html[accessibility-filter="HighContrast"] p,
html[accessibility-filter="HighContrast"] a,
html[accessibility-filter="HighContrast"] span {
    background-color: initial !important;
}

/* Headers */
html[accessibility-headers="Underline"] h1,
html[accessibility-headers="Underline"] h2,
html[accessibility-headers="Underline"] h3,
html[accessibility-headers="Underline"] h4,
html[accessibility-headers="Underline"] h5,
html[accessibility-headers="Underline"] h6 {
    text-decoration: underline 1px solid !important;
}

html[accessibility-headers="Border"] h1,
html[accessibility-headers="Border"] h2,
html[accessibility-headers="Border"] h3,
html[accessibility-headers="Border"] h4,
html[accessibility-headers="Border"] h5,
html[accessibility-headers="Border"] h6 {
    outline: 1px solid var(--accessibility-highlight) !important;
}

html[accessibility-headers="Highlight"] h1,
html[accessibility-headers="Highlight"] h2,
html[accessibility-headers="Highlight"] h3,
html[accessibility-headers="Highlight"] h4,
html[accessibility-headers="Highlight"] h5,
html[accessibility-headers="Highlight"] h6 {
    background-color: var(--accessibility-highlight) !important;
    color: var(--accessibility-background) !important;
}

/* Links */
html[accessibility-links="Underline"] a {
    text-decoration: underline 1px solid !important;
}

html[accessibility-links="Border"] a {
    outline: 1px solid var(--accessibility-highlight) !important;
}

html[accessibility-links="Highlight"] a {
    background-color: var(--accessibility-highlight) !important;
    color: var(--accessibility-background) !important;
}

html[accessibility-links="Highlight"] a * {
    background-color: var(--accessibility-highlight) !important;
    color: var(--accessibility-background) !important;
}

/* Images */
html[accessibility-images="Grayscale"] img {
    filter: grayscale(1) !important;
}

html[accessibility-images="Hidden"] img {
    visibility: hidden !important;
}

html[accessibility-disable-animations="true"] * {
    transition: none !important;
}

.accessibility-button {
    cursor: pointer;
    background-color: var(--accessibility-blue);
    border: 1px solid var(--accessibility-blue);
    color: var(--accessibility-text);
    border-radius: 100rem;
    overflow: hidden;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 1000;
}

.accessibility-button>.accessibility-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 4rem;
}

.accessibility-button>.accessibility-button-content>* {
    font-size: 2.5rem;
    line-height: 1;
    transition: 0.1s font-size;
}

.accessibility-button>.accessibility-button-content:hover>* {
    font-size: 2rem;
}

.accessibility-menu {
    background: initial !important;
    position: fixed;
    right: 0px;
    top: 0px;
    width: min(450px, 100%);
    height: 100%;
    z-index: 1000;
    overflow: auto;
    word-break: break-word;
}

.accessibility-menu>.accessibility-menu-content {
    background-color: var(--accessibility-background);
    color: var(--accessibility-highlight);
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: 0.4s transform, 0.4s opacity;
}

.accessibility-menu:not([is-open="true"])>.accessibility-menu-content {
    transform: translateX(100%);
    opacity: 0;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-label {
    padding: 0.75rem;
    width: 100%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-label .accessibility-menu-label-content {
    font-weight: bold;
    width: 100%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-button {
    padding: 0.75rem;
    width: 100%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-button .accessibility-menu-button-content {
    cursor: pointer;
    border-radius: 1.5rem;
    border: 1px solid var(--accessibility-highlight);
    padding: 1.5rem;
    text-align: center;
    width: 100%;
    transition: 0.2s background-color, 0.2s color;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-button[active="true"] .accessibility-menu-button-content {
    background-color: var(--accessibility-highlight) !important;
    color: var(--accessibility-background) !important;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-row>.accessibility-menu-button.s {
    width: 33.33%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-row>.accessibility-menu-button.m {
    width: 50%;
}

.accessibility-menu>.accessibility-menu-content .accessibility-menu-row>.accessibility-menu-button.b {
    width: 100%;
}