accessibility-plugin
Version:
You can use this plugin to make a accessibility friendly website fast and easily
2 lines • 68.6 kB
JavaScript
const accessibilityMenuStyles="\n :root {\n --acc_color_1: #000;\n --acc_color_2: #fff;\n --border_radius: 25px;\n }\n \n .hidden {\n display: none !important;\n }\n \n #accessibility-modal,\n #accessibility-modal * {\n transition: all 0.3s ease 0s;\n font-family: 'calibri', sans-serif;\n font-size: 16px;\n line-height: 1;\n letter-spacing: 0;\n text-align: center;\n user-select: none;\n }\n \n #accessibility-modal {\n position: fixed;\n top: 5vh;\n left: 0;\n width: 98%;\n max-width: 500px;\n height: auto;\n max-height: 90vh;\n background: var(--acc_color_2);\n z-index: 1000;\n justify-content: center;\n border-radius: 0 var(--border_radius) var(--border_radius) 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: clip;\n display: flex;\n flex-direction: column;\n }\n \n #accessibility-modal #closeBtn {\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: var(--border_radius);\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n cursor: pointer;\n overflow: clip;\n border: none;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: translate(0,-4px);\n }\n \n #accessibility-modal.left #closeBtn {\n top: 0;\n right: 0;\n margin: 15px;\n }\n \n #accessibility-modal.right #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.top #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.bottom #closeBtn {\n top: 0;\n left: 0;\n margin: 15px;\n }\n \n #accessibility-modal.left {\n left: 0;\n right: auto;\n border-radius: 0 var(--border_radius) var(--border_radius) 0;\n }\n \n #accessibility-modal.right {\n right: 0;\n left: auto;\n border-radius: var(--border_radius) 0 0 var(--border_radius);\n }\n \n #accessibility-modal.top {\n top: 0;\n left: 1%;\n height: auto;\n max-height: 90vh;\n border-radius: 0 0 var(--border_radius) var(--border_radius);\n }\n \n #accessibility-modal.bottom {\n top: auto;\n bottom: 0;\n left: 1%;\n height: auto;\n max-height: 90vh;\n border-radius: var(--border_radius) var(--border_radius) 0 0;\n }\n \n #accessibility-modal.close {\n width: 50px;\n height: 50px;\n border-radius: var(--border_radius);\n cursor: pointer;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: clip;\n margin: 5px;\n padding: 0;\n }\n \n #accessibility-modal.close .acc-item {\n opacity: 0;\n }\n \n #accessibility-modal.close #closeBtn {\n position: absolute;\n width: 50px;\n height: 50px;\n border: none;\n background: none;\n color: var(--acc_color_2);\n background: var(--acc_color_1);\n font-size: 20px;\n cursor: pointer;\n margin: 0;\n transform: translate(0,0);\n }\n \n #accessibility-modal #closeBtn svg {\n width: 20px;\n height: 20px;\n }\n \n #accessibility-modal.close #closeBtn svg {\n width: 40px;\n height: 40px;\n }\n \n #accessibility-modal.close:hover #closeBtn {\n filter: opacity(0.8);\n }\n \n #accessibility-modal #headerContent {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: calc(100% - 80px);\n height: 50px;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n border-radius: var(--border_radius);\n margin: 10px 10px 10px 70px;\n }\n \n #accessibility-modal.left #headerContent {\n margin: 10px 70px 10px 10px;\n }\n \n #accessibility-modal.right #headerContent {\n margin: 10px 10px 10px 70px;\n }\n \n #accessibility-modal #headerContent p {\n font-size: 20px;\n font-weight: 600;\n }\n \n #accessibility-modal.close #headerContent {\n display: none;\n }\n \n #accessibility-tools {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: start;\n width: 100%;\n height: auto;\n transition: all 0.3s ease 2s;\n overflow-y: auto;\n margin-bottom: 140px;\n }\n \n #accessibility-tools::-webkit-scrollbar {\n width: 10px;\n background: var(--acc_color_2);\n }\n \n #accessibility-tools::-webkit-scrollbar-thumb {\n background: var(--acc_color_1);\n border-radius: 10px;\n }\n \n .acc-item {\n min-width: 120px;\n width: 33%;\n max-width: 200px;\n height: auto;\n margin: 0;\n cursor: pointer;\n }\n \n .acc-item:hover .acc-child {\n box-shadow: 0 0 5px rgba(0, 0, 0, .5);\n }\n \n .acc-item:hover .acc-child.active {\n filter: opacity(0.8);\n border: 1px solid var(--acc_color_2);\n color: var(--acc_color_2);\n }\n \n .acc-child {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: auto;\n height: auto;\n aspect-ratio: 1/1;\n background: var(--acc_color_2);\n border-radius: var(--border_radius);\n margin: 10px;\n padding: 10px 10px 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--acc_color_1);\n color: var(--acc_color_1);\n }\n \n .acc-child.active {\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n box-shadow: none;\n border: 1px solid var(--acc_color_1);\n }\n \n .acc-progress-parent {\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding-bottom: 10px;\n }\n \n .acc-progress-child {\n min-width: 30%;\n width: 48%;\n max-width: 48%;\n height: 3px;\n margin: 0 1%;\n background: var(--acc_color_1);\n border-radius: 5px;\n }\n \n .acc-child.active .acc-progress-child {\n background: var(--acc_color_2);\n opacity: 0.5;\n }\n \n .acc-child.active .acc-progress-child.active {\n opacity: 1;\n }\n \n #accessibility-tools svg,\n #accessibility-tools img {\n width: 30px;\n height: 30px;\n margin-bottom: 10px;\n }\n \n #change-positions {\n display: flex;\n align-items: bottom;\n width: fit-content;\n background: var(--acc_color_1);\n border-top-right-radius: var(--border_radius);\n }\n \n #change-positions button {\n width: auto;\n height: 50px;\n border: none;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1/1;\n padding: 20px;\n margin: 10px;\n border-radius: var(--border_radius);\n }\n \n #change-positions button svg {\n scale: 1.3;\n fill: var(--acc_color_2);\n }\n \n #change-positions button:hover {\n background: var(--acc_color_2);\n }\n \n #change-positions button:hover svg {\n scale: 1.8;\n fill: var(--acc_color_1);\n }\n \n #change-positions button.active {\n background: var(--acc_color_2);\n }\n \n #change-positions button.active svg {\n fill: var(--acc_color_1);\n }\n \n #acc-footer {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n background: var(--acc_color_2);\n }\n \n #reset-all {\n width: calc(100% - 20px);\n height: 50px;\n background: var(--acc_color_1);\n color: var(--acc_color_2);\n border-radius: var(--border_radius);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px;\n }\n \n #reset-all:hover {\n filter: opacity(0.8);\n }\n \n /*Accessibility Tools*/\n \n .invert {\n filter: invert(1);\n }\n \n .grayscale {\n filter: grayscale(1);\n }\n \n .low-saturation {\n filter: saturate(20%);\n }\n \n .high-saturation {\n filter: saturate(200%);\n }\n \n .underline-style-0 a {\n text-decoration: none;\n background: black !important;\n color: yellow !important;\n font-weight: bolder;\n }\n \n .underline-style-0 a:hover,\n .underline-style-2 a:hover,\n .underline-style-1 a:hover {\n text-decoration: underline !important;\n }\n \n .underline-style-1 a {\n text-decoration: none;\n background: #FFD740 !important;\n color: #005A9C !important;\n font-weight: bolder;\n }\n \n .underline-style-2 a {\n text-decoration: none;\n background: white !important;\n color: black !important;\n font-weight: bolder;\n }\n \n .contrast-style-0 {\n filter: contrast(0.5);\n }\n \n .contrast-style-1 {\n filter: contrast(1.5);\n }\n \n .contrast-style-2 {\n filter: contrast(2);\n }\n \n /*Apply Two or more filters*/\n \n .invert.grayscale {\n filter: invert(1) grayscale(1);\n }\n \n .invert.low-saturation {\n filter: invert(1) saturate(20%);\n }\n \n .invert.high-saturation {\n filter: invert(1) saturate(200%);\n }\n \n .invert.contrast-style-0 {\n filter: invert(1) contrast(0.5);\n }\n \n .invert.contrast-style-1 {\n filter: invert(1) contrast(1.5);\n }\n \n .invert.contrast-style-2 {\n filter: invert(1) contrast(2);\n }\n \n .grayscale.low-saturation {\n filter: grayscale(1) saturate(20%);\n }\n \n .grayscale.high-saturation {\n filter: grayscale(1) saturate(200%);\n }\n \n .grayscale.contrast-style-0 {\n filter: grayscale(1) contrast(0.5);\n }\n \n .grayscale.contrast-style-1 {\n filter: grayscale(1) contrast(1.5);\n }\n \n .grayscale.contrast-style-2 {\n filter: grayscale(1) contrast(2);\n }\n \n .low-saturation.high-saturation {\n filter: saturate(20%) saturate(200%);\n }\n \n .low-saturation.contrast-style-0 {\n filter: saturate(20%) contrast(0.5);\n }\n \n .low-saturation.contrast-style-1 {\n filter: saturate(20%) contrast(1.5);\n }\n \n .low-saturation.contrast-style-2 {\n filter: saturate(20%) contrast(2);\n }\n \n .high-saturation.contrast-style-0 {\n filter: saturate(200%) contrast(0.5);\n }\n \n .high-saturation.contrast-style-1 {\n filter: saturate(200%) contrast(1.5);\n }\n \n .high-saturation.contrast-style-2 {\n filter: saturate(200%) contrast(2);\n }\n \n .contrast-style-0.contrast-style-1 {\n filter: contrast(0.5) contrast(1.5);\n }\n \n .contrast-style-0.contrast-style-2 {\n filter: contrast(0.5) contrast(2);\n }\n \n .contrast-style-1.contrast-style-2 {\n filter: contrast(1.5) contrast(2);\n }\n \n .invert.grayscale.low-saturation {\n filter: invert(1) grayscale(1) saturate(20%);\n }\n \n .invert.grayscale.high-saturation {\n filter: invert(1) grayscale(1) saturate(200%);\n }\n \n .invert.grayscale.contrast-style-0 {\n filter: invert(1) grayscale(1) contrast(0.5);\n }\n \n .invert.grayscale.contrast-style-1 {\n filter: invert(1) grayscale(1) contrast(1.5);\n }\n \n .invert.grayscale.contrast-style-2 {\n filter: invert(1) grayscale(1) contrast(2);\n }\n \n .invert.low-saturation.high-saturation {\n filter: invert(1) saturate(20%) saturate(200%);\n }\n \n .invert.low-saturation.contrast-style-0 {\n filter: invert(1) saturate(20%) contrast(0.5);\n }\n \n .invert.low-saturation.contrast-style-1 {\n filter: invert(1) saturate(20%) contrast(1.5);\n }\n \n .invert.low-saturation.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-0 {\n filter: invert(1) saturate(200%) contrast(0.5);\n }\n \n .invert.high-saturation.contrast-style-1 {\n filter: invert(1) saturate(200%) contrast(1.5);\n }\n \n .invert.high-saturation.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(2);\n }\n \n .invert.contrast-style-0.contrast-style-1 {\n filter: invert(1) contrast(0.5) contrast(1.5);\n }\n \n .invert.contrast-style-0.contrast-style-2 {\n filter: invert(1) contrast(0.5) contrast(2);\n }\n \n .invert.contrast-style-1.contrast-style-2 {\n filter: invert(1) contrast(1.5) contrast(2);\n }\n \n .grayscale.low-saturation.high-saturation {\n filter: grayscale(1) saturate(20%) saturate(200%);\n }\n \n .grayscale.low-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(20%) contrast(0.5);\n }\n \n .grayscale.low-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(20%) contrast(1.5);\n }\n \n .grayscale.low-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(200%) contrast(0.5);\n }\n \n .grayscale.high-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(200%) contrast(1.5);\n }\n \n .grayscale.high-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(2);\n }\n \n .grayscale.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) contrast(0.5) contrast(2);\n }\n \n .grayscale.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) contrast(1.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-0 {\n filter: saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .low-saturation.high-saturation.contrast-style-1 {\n filter: saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .low-saturation.high-saturation.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(2);\n }\n \n .low-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .low-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(20%) contrast(0.5) contrast(2);\n }\n \n .low-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(20%) contrast(1.5) contrast(2);\n }\n \n .high-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .high-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(200%) contrast(0.5) contrast(2);\n }\n \n .high-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(200%) contrast(1.5) contrast(2);\n }\n \n .contrast-style-0.contrast-style-1.contrast-style-2 {\n filter: contrast(0.5) contrast(1.5) contrast(2);\n }\n \n .invert.grayscale.low-saturation.high-saturation {\n filter: invert(1) grayscale(1) saturate(20%) saturate(200%);\n }\n \n .invert.grayscale.low-saturation.contrast-style-0 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(0.5);\n }\n \n .invert.grayscale.low-saturation.contrast-style-1 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(1.5);\n }\n \n .invert.grayscale.low-saturation.contrast-style-2 {\n filter: invert(1) grayscale(1) saturate(20%) contrast(2);\n }\n \n .invert.grayscale.high-saturation.contrast-style-0 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(0.5);\n }\n \n .invert.grayscale.high-saturation.contrast-style-1 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(1.5);\n }\n \n .invert.grayscale.high-saturation.contrast-style-2 {\n filter: invert(1) grayscale(1) saturate(200%) contrast(2);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-0 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-1 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .invert.low-saturation.high-saturation.contrast-style-2 {\n filter: invert(1) saturate(20%) saturate(200%) contrast(2);\n }\n \n .invert.low-saturation.contrast-style-0.contrast-style-1 {\n filter: invert(1) saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .invert.low-saturation.contrast-style-0.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(0.5) contrast(2);\n }\n \n .invert.low-saturation.contrast-style-1.contrast-style-2 {\n filter: invert(1) saturate(20%) contrast(1.5) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-0.contrast-style-1 {\n filter: invert(1) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .invert.high-saturation.contrast-style-0.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .invert.high-saturation.contrast-style-1.contrast-style-2 {\n filter: invert(1) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-0 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(0.5);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-1 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(1.5);\n }\n \n .grayscale.low-saturation.high-saturation.contrast-style-2 {\n filter: grayscale(1) saturate(20%) saturate(200%) contrast(2);\n }\n \n .grayscale.low-saturation.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) saturate(20%) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.low-saturation.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(0.5) contrast(2);\n }\n \n .grayscale.low-saturation.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) saturate(20%) contrast(1.5) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-0.contrast-style-1 {\n filter: grayscale(1) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .grayscale.high-saturation.contrast-style-0.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .grayscale.high-saturation.contrast-style-1.contrast-style-2 {\n filter: grayscale(1) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-0.contrast-style-1 {\n filter: saturate(20%) saturate(200%) contrast(0.5) contrast(1.5);\n }\n \n .low-saturation.high-saturation.contrast-style-0.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(0.5) contrast(2);\n }\n \n .low-saturation.high-saturation.contrast-style-1.contrast-style-2 {\n filter: saturate(20%) saturate(200%) contrast(1.5) contrast(2);\n }\n \n .hide-images img {\n display: none;\n }\n \n .hide-video video {\n display: none;\n }\n \n .line-height-0 * {\n line-height: 1.5;\n }\n \n .line-height-1 * {\n line-height: 1.8;\n }\n \n .line-height-2 * {\n line-height: 2;\n }\n \n #cursor {\n position: fixed;\n z-index: 999999999;\n pointer-events: none;\n top: 0;\n left: 0;\n }\n \n #cursor.cursor-0 {\n width: 50px;\n height: auto;\n aspect-ratio: 1/1;\n background: rgba(255, 0, 0, 0.5);\n border: 2px solid var(--acc_color_2);\n box-shadow: 0 0 20px 0 var(--acc_color_2);\n border-radius: 50%;\n mix-blend-mode: difference;\n transition: all 0.1s ease;\n transform-origin: center;\n transform: translate(-50%, -50%);\n }\n \n #cursor.cursor-1 {\n width: 100%;\n height: 15vh;\n background: transparent;\n border: 10px solid var(--acc_color_2);\n border-left: 0;\n border-right: 0;\n box-shadow: 0 0 0 100vh rgb(0 0 0 / 50%);\n transition: none;\n transform: translate(0, -50%);\n }\n \n #cursor.cursor-2 {\n width: 25vw;\n height: 8px;\n background: var(--acc_color_1);\n border: yellow 2px solid;\n transition: all 0.1s ease;\n transform-origin: center;\n transform: translate(-50%, 50%);\n }\n \n #triangle-cursor {\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 10px solid yellow;\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-50%, -50%);\n transition: all 0.1s ease;\n z-index: 999999998;\n pointer-events: none;\n display: none;\n }\n",accessibilityMenuHTML='\n <div id="accessibility-modal" class="right close" style="z-index: 99999999;">\n <button id="closeBtn" style="z-index: 99999999;">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-universal-access-circle" viewBox="0 0 16 16">\n <path d="M8 4.143A1.071 1.071 0 1 0 8 2a1.071 1.071 0 0 0 0 2.143m-4.668 1.47 3.24.316v2.5l-.323 4.585A.383.383 0 0 0 7 13.14l.826-4.017c.045-.18.301-.18.346 0L9 13.139a.383.383 0 0 0 .752-.125L9.43 8.43v-2.5l3.239-.316a.38.38 0 0 0-.047-.756H3.379a.38.38 0 0 0-.047.756Z" />\n <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8" />\n </svg>\n </button>\n <div id="headerContent">\n <p>Accessibility Tools</p>\n </div>\n <div id="accessibility-tools">\n \n <!--invert colors-->\n <div class="acc-item">\n <div class="acc-child" id="invert-colors">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />\n <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />\n </svg>\n <p>Invert Colours</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--grayscale-->\n <div class="acc-item">\n <div class="acc-child" id="grayscale">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-circle-half" viewBox="0 0 16 16">\n <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16" />\n </svg>\n <p>Grayscale</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--saturation-->\n <div class="acc-item">\n <div class="acc-child" id="saturation">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">\n <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />\n <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7" />\n </svg>\n <p>Low Saturation</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1 active"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n </div>\n </div>\n </div>\n \n <!--links highlight-->\n <div class="acc-item">\n <div class="acc-child" id="underline">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">\n <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z" />\n <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z" />\n </svg>\n <p>Links Highlight</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--font size-->\n <div class="acc-item">\n <div class="acc-child" id="font-size">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M17 12V17H17.5C17.7761 17 18 17.2239 18 17.5C18 17.7761 17.7761 18 17.5 18H15.5C15.2239 18 15 17.7761 15 17.5C15 17.2239 15.2239 17 15.5 17H16V12H14V12.5C14 12.7761 13.7761 13 13.5 13C13.2239 13 13 12.7761 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11H19.5C19.7761 11 20 11.2239 20 11.5V12.5C20 12.7761 19.7761 13 19.5 13C19.2239 13 19 12.7761 19 12.5V12H17ZM10 6V17H11.5C11.7761 17 12 17.2239 12 17.5C12 17.7761 11.7761 18 11.5 18H7.5C7.22386 18 7 17.7761 7 17.5C7 17.2239 7.22386 17 7.5 17H9V6H5V7.5C5 7.77614 4.77614 8 4.5 8C4.22386 8 4 7.77614 4 7.5V5.5C4 5.22386 4.22386 5 4.5 5H14.5C14.7761 5 15 5.22386 15 5.5V7.5C15 7.77614 14.7761 8 14.5 8C14.2239 8 14 7.77614 14 7.5V6H10Z" fill="black" />\n </svg>\n <p>Font Size</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--line height-->\n <div class="acc-item">\n <div class="acc-child" id="line-height">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M19 5.70711V17.2929L20.1464 16.1464C20.3417 15.9512 20.6583 15.9512 20.8536 16.1464C21.0488 16.3417 21.0488 16.6583 20.8536 16.8536L18.8536 18.8536C18.6583 19.0488 18.3417 19.0488 18.1464 18.8536L16.1464 16.8536C15.9512 16.6583 15.9512 16.3417 16.1464 16.1464C16.3417 15.9512 16.6583 15.9512 16.8536 16.1464L18 17.2929V5.70711L16.8536 6.85355C16.6583 7.04882 16.3417 7.04882 16.1464 6.85355C15.9512 6.65829 15.9512 6.34171 16.1464 6.14645L18.1464 4.14645C18.3417 3.95118 18.6583 3.95118 18.8536 4.14645L20.8536 6.14645C21.0488 6.34171 21.0488 6.65829 20.8536 6.85355C20.6583 7.04882 20.3417 7.04882 20.1464 6.85355L19 5.70711ZM8 18V5H4V6.5C4 6.77614 3.77614 7 3.5 7C3.22386 7 3 6.77614 3 6.5V4.5C3 4.22386 3.22386 4 3.5 4H13.5C13.7761 4 14 4.22386 14 4.5V6.5C14 6.77614 13.7761 7 13.5 7C13.2239 7 13 6.77614 13 6.5V5H9V18H10.5C10.7761 18 11 18.2239 11 18.5C11 18.7761 10.7761 19 10.5 19H6.5C6.22386 19 6 18.7761 6 18.5C6 18.2239 6.22386 18 6.5 18H8Z" fill="black" />\n </svg>\n <p>Line Height</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--letter spacing-->\n <div class="acc-item">\n <div class="acc-child" id="letter-spacing">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M13 13H14.5C14.7761 13 15 13.2239 15 13.5C15 13.7761 14.7761 14 14.5 14H10.5C10.2239 14 10 13.7761 10 13.5C10 13.2239 10.2239 13 10.5 13H12V5H5V6.5C5 6.77614 4.77614 7 4.5 7C4.22386 7 4 6.77614 4 6.5V4.5C4 4.22386 4.22386 4 4.5 4H20.5C20.7761 4 21 4.22386 21 4.5V6.5C21 6.77614 20.7761 7 20.5 7C20.2239 7 20 6.77614 20 6.5V5H13V13ZM5.70711 18H19.2929L18.1464 16.8536C17.9512 16.6583 17.9512 16.3417 18.1464 16.1464C18.3417 15.9512 18.6583 15.9512 18.8536 16.1464L20.8536 18.1464C21.0488 18.3417 21.0488 18.6583 20.8536 18.8536L18.8536 20.8536C18.6583 21.0488 18.3417 21.0488 18.1464 20.8536C17.9512 20.6583 17.9512 20.3417 18.1464 20.1464L19.2929 19H5.70711L6.85355 20.1464C7.04882 20.3417 7.04882 20.6583 6.85355 20.8536C6.65829 21.0488 6.34171 21.0488 6.14645 20.8536L4.14645 18.8536C3.95118 18.6583 3.95118 18.3417 4.14645 18.1464L6.14645 16.1464C6.34171 15.9512 6.65829 15.9512 6.85355 16.1464C7.04882 16.3417 7.04882 16.6583 6.85355 16.8536L5.70711 18Z" fill="black" />\n </svg>\n <p>Letter Spacing</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--text align-->\n <div class="acc-item">\n <div class="acc-child" id="text-align">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M4.5 7C4.22386 7 4 6.77614 4 6.5C4 6.22386 4.22386 6 4.5 6H19.5C19.7761 6 20 6.22386 20 6.5C20 6.77614 19.7761 7 19.5 7H4.5ZM4.5 15C4.22386 15 4 14.7761 4 14.5C4 14.2239 4.22386 14 4.5 14H19.5C19.7761 14 20 14.2239 20 14.5C20 14.7761 19.7761 15 19.5 15H4.5ZM4.5 11C4.22386 11 4 10.7761 4 10.5C4 10.2239 4.22386 10 4.5 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H4.5ZM4.5 19C4.22386 19 4 18.7761 4 18.5C4 18.2239 4.22386 18 4.5 18H13.5C13.7761 18 14 18.2239 14 18.5C14 18.7761 13.7761 19 13.5 19H4.5Z" fill="black"/>\n </svg>\n <p>Text Align</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--contrast-->\n <div class="acc-item">\n <div class="acc-child" id="contrast">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-transparency" viewBox="0 0 16 16">\n <path d="M0 6.5a6.5 6.5 0 0 1 12.346-2.846 6.5 6.5 0 1 1-8.691 8.691A6.5 6.5 0 0 1 0 6.5m5.144 6.358a5.5 5.5 0 1 0 7.714-7.714 6.5 6.5 0 0 1-7.714 7.714m-.733-1.269q.546.226 1.144.33l-1.474-1.474q.104.597.33 1.144m2.614.386a5.5 5.5 0 0 0 1.173-.242L4.374 7.91a6 6 0 0 0-.296 1.118zm2.157-.672q.446-.25.838-.576L5.418 6.126a6 6 0 0 0-.587.826zm1.545-1.284q.325-.39.576-.837L6.953 4.83a6 6 0 0 0-.827.587l4.6 4.602Zm1.006-1.822q.183-.562.242-1.172L9.028 4.078q-.58.096-1.118.296l3.823 3.824Zm.186-2.642a5.5 5.5 0 0 0-.33-1.144 5.5 5.5 0 0 0-1.144-.33z" />\n </svg>\n <p>Contrast</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n \n <!--hide images-->\n <div class="acc-item">\n <div class="acc-child" id="hide-images">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">\n <path d="M4.8,4L4.8,4l1,1L4.8,4z M19.7,19L19.7,19l0.8,0.8L19.7,19z" />\n <path d="M18,7h-2c-0.5,0-1,0.5-1,1v2c0,0.5,0.5,1,1,1h2c0.5,0,1-0.5,1-1V8C19,7.5,18.5,7,18,7z M18,10h-2V8h2V10z" />\n <path d="M22,6.5v11c0,0.6-0.2,1.1-0.6,1.6l-0.6-0.6l-0.1-0.1l-4.9-4.9l0.3-0.3c0.2-0.2,0.5-0.2,0.7,0l4.2,4.1V6.5\tC21,5.7,20.3,5,19.5,5H7.4l-1-1h13.1C20.9,4,22,5.1,22,6.5z" />\n <path d="M1.9,1.1L1.1,1.9l2.4,2.4C2.6,4.6,2,5.5,2,6.5v11C2,18.9,3.1,20,4.5,20h14.8l2.9,2.9l0.7-0.7L1.9,1.1z M3,6.5\tC3,5.8,3.5,5.1,4.3,5l10,10l-0.8,0.8l-5.7-5.6c-0.2-0.2-0.5-0.2-0.7,0L3,14.3V6.5z M4.5,19C3.7,19,3,18.3,3,17.5v-1.8l4.5-4.5\tl5.7,5.6c0.2,0.2,0.5,0.2,0.7,0l1.1-1.1l3.3,3.3H4.5z" />\n </svg>\n <p>Hide image</p>\n </div>\n </div>\n \n <!--hide video-->\n <div class="acc-item">\n <div class="acc-child" id="hide-video">\n <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-off" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M10.961 12.365a2 2 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518zM1.428 4.18A1 1 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634zM15 11.73l-3.5-1.555v-4.35L15 4.269zm-4.407 3.56-10-14 .814-.58 10 14z" />\n </svg>\n <p>Hide video</p>\n </div>\n </div>\n \n <!--change cursor-->\n <div class="acc-item">\n <div class="acc-child" id="change-cursor">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M8.85333 19.8536C8.58758 20.1193 8.13463 20.0079 8.02253 19.6492L3.02253 3.64915C2.90221 3.26413 3.26389 2.90246 3.64891 3.02278L19.6489 8.02278C20.0076 8.13487 20.1191 8.58782 19.8533 8.85357L16.2069 12.5L20.8533 17.1465C21.0486 17.3417 21.0486 17.6583 20.8533 17.8536L17.8533 20.8536C17.6581 21.0488 17.3415 21.0488 17.1462 20.8536L12.4998 16.2071L8.85333 19.8536ZM4.26173 4.26197L8.73053 18.5621L12.1462 15.1465C12.3415 14.9512 12.6581 14.9512 12.8533 15.1465L17.4998 19.7929L19.7927 17.5L15.1462 12.8536C14.951 12.6583 14.951 12.3417 15.1462 12.1465L18.5619 8.73078L4.26173 4.26197Z" fill="black" />\n </svg>\n <p>Change Cursors</p>\n <div class="acc-progress-parent hidden">\n <div class="acc-progress-child acc-progress-child-1"></div>\n <div class="acc-progress-child acc-progress-child-2"></div>\n <div class="acc-progress-child acc-progress-child-3"></div>\n </div>\n </div>\n </div>\n </div>\n \n <!--cursor and triangle cursor-->\n <div id="cursor"></div>\n <div id="triangle-cursor"></div>\n \n <!--accessibility modal footer-->\n <div id="acc-footer">\n \n <!--reset all-->\n <button id="reset-all">\n Reset All\n </button>\n \n <!--change positions-->\n <div id="change-positions">\n <button id="align-acc-left"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-start" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5" />\n <path d="M3 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />\n </svg></button>\n <button id="align-acc-top"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-top" viewBox="0 0 16 16">\n <rect width="4" height="12" rx="1" transform="matrix(1 0 0 -1 6 15)" />\n <path d="M1.5 2a.5.5 0 0 1 0-1zm13-1a.5.5 0 0 1 0 1zm-13 0h13v1h-13z" />\n </svg></button>\n <button id="align-acc-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-bottom" viewBox="0 0 16 16">\n <rect width="4" height="12" x="6" y="1" rx="1" />\n <path d="M1.5 14a.5.5 0 0 0 0 1zm13 1a.5.5 0 0 0 0-1zm-13 0h13v-1h-13z" />\n </svg></button>\n <button id="align-acc-right"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M14.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5" />\n <path d="M13 7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1z" />\n </svg></button>\n </div>\n </div>\n </div>\n'
;document.addEventListener("DOMContentLoaded",function(){function e(){r.classList.toggle("close"),a.innerHTML=r.classList.contains("close")?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-universal-access-circle" viewBox="0 0 16 16">\n <path d="M8 4.143A1.071 1.071 0 1 0 8 2a1.071 1.071 0 0 0 0 2.143m-4.668 1.47 3.24.316v2.5l-.323 4.585A.383.383 0 0 0 7 13.14l.826-4.017c.045-.18.301-.18.346 0L9 13.139a.383.383 0 0 0 .752-.125L9.43 8.43v-2.5l3.239-.316a.38.38 0 0 0-.047-.756H3.379a.38.38 0 0 0-.047.756Z"/>\n <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8"/>\n</svg>':r.classList.contains("top")?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>\n</svg>':r.classList.contains("bottom")?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>\n</svg>':r.classList.contains("left")?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>\n</svg>':r.classList.contains("right")?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">\n <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>\n</svg>':""}function t(){r.classList.contains("left")?(l.classList.add("active"),o.classList.remove("active"),d.classList.remove("active"),v.classList.remove("active")):r.classList.contains("top")?(o.classList.add("active"),l.classList.remove("active"),d.classList.remove("active"),v.classList.remove("active")):r.classList.contains("bottom")?(d.classList.add("active"),o.classList.remove("active"),l.classList.remove("active"),v.classList.remove("active")):r.classList.contains("right")&&(v.classList.add("active"),o.classList.remove("active"),d.classList.remove("active"),l.classList.remove("active"))}function s(){localStorage.setItem("accessibility-settings",JSON.stringify({invertColors:i.classList.contains("invert"),grayscale:i.classList.contains("grayscale"),highSaturation:i.classList.contains("high-saturation"),lowSaturation:i.classList.contains("low-saturation"),underlineStyle0:i.classList.contains("underline-style-0"),underlineStyle1:i.classList.contains("underline-style-1"),underlineStyle2:i.classList.contains("underline-style-2"),fontSize:i.style.fontSize,lineHeight0:i.classList.contains("line-height-0"),lineHeight1:i.classList.contains("line-height-1"),lineHeight2:i.classList.contains("line-height-2"),letterSpacing:i.style.letterSpacing,textAlign:i.style.textAlign,contrast:i.classList.contains("contrast"),contrastStyle0:i.classList.contains("contrast-style-0"),contrastStyle1:i.classList.contains("contrast-style-1"),contrastStyle2:i.classList.contains("contrast-style-2"),hideImages:i.classList.contains("hide-images"),hideVideo:i.classList.contains("hide-video"),cursor0:S.classList.contains("cursor-0"),cursor1:S.classList.contains("cursor-1"),cursor2:S.classList.contains("cursor-2"),accPosition:r.classList.contains("left")?"left":r.classList.contains("top")?"top":r.classList.contains("bottom")?"bottom":r.classList.contains("right")?"right":""}))}const c=document.createElement("style");c.innerHTML=accessibilityMenuStyles,document.head.appendChild(c),document.body.insertAdjacentHTML("beforeend",accessibilityMenuHTML);const r=document.getElementById("accessibility-modal"),a=document.getElementById("closeBtn");document.getElementById("accessibility-tools");a.addEventListener("click",()=>{e()});const n=document.querySelectorAll(".acc-item");n.forEach(e=>{e.addEventListener("click",()=>{e.querySelector(".acc-child").classList.toggle("active"),e.querySelectorAll("path").forEach(t=>{t.style.fill=e.querySelector(".acc-child").classList.contains("active")?"var(--acc_color_2)":"var(--acc_color_1)"})})});const i=document.querySelector("html"),l=document.getElementById("align-acc-left"),o=document.getElementById("align-acc-top"),d=document.getElementById("align-acc-bottom"),v=document.getElementById("align-acc-right");t(),l.addEventListener("click",()=>{e(),r.classList.remove("top"),r.classList.remove("bottom"),r.classList.remove("right"),r.classList.add("left"),t()}),o.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("bottom"),r.classList.remove("right"),r.classList.add("top"),t()}),d.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("top"),r.classList.remove("right"),r.classList.add("bottom"),t()}),v.addEventListener("click",()=>{e(),r.classList.remove("left"),r.classList.remove("top"),r.classList.remove("bottom"),r.classList.add("right"),t()}),document.querySelector("#invert-colors").addEventListener("click",()=>{document.querySelector("#invert-colors");i.classList.toggle("invert")}),document.querySelector("#grayscale").addEventListener("click",()=>{document.querySelector("#grayscale");i.classList.toggle("grayscale")});let h=0;document.querySelector("#saturation").addEventListener("click",()=>{const e=document.querySelector("#saturation");2===h?(h=0,e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("high-saturation"),i.classList.remove("low-saturation")):(e.classList.remove("active"),0===h?(i.classList.add("low-saturation"),e.querySelector("p").innerText="Low Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active")):1===h&&(i.classList.remove("low-saturation"),i.classList.add("high-saturation"),e.querySelector("p").innerText="High Saturation",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active")),h++)});let g=0;document.querySelector("#underline").addEventListener("click",()=>{const e=document.querySelector("#underline");3===g?(g=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("underline"),i.classList.remove("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.remove("underline-style-2")):(e.classList.remove("active"),0===g?(i.classList.add("underline"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active"),i.classList.add("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.remove("underline-style-2")):1===g?(i.classList.remove("underline-style-0"),i.classList.add("underline-style-1"),i.classList.remove("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===g&&(i.classList.remove("underline-style-0"),i.classList.remove("underline-style-1"),i.classList.add("underline-style-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),g++)});let u=0;document.querySelector("#font-size").addEventListener("click",()=>{const e=document.querySelector("#font-size");3===u?(u=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.style.fontSize=""):(e.classList.remove("active"),0===u?(i.style.fontSize="1.3rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===u?(i.style.fontSize="1.5rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===u&&(i.style.fontSize="1.8rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),u++)});let y=0;document.querySelector("#line-height").addEventListener("click",()=>{const e=document.querySelector("#line-height");3===y?(y=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.classList.remove("line-height-0"),i.classList.remove("line-height-1"),i.classList.remove("line-height-2")):(e.classList.remove("active"),0===y?(i.classList.add("line-height-0"),i.classList.remove("line-height-1"),i.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===y?(i.classList.remove("line-height-0"),i.classList.add("line-height-1"),i.classList.remove("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.add("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):2===y&&(i.classList.remove("line-height-0"),i.classList.remove("line-height-1"),i.classList.add("line-height-2"),e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.remove("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.add("active")),y++)});let p=0;document.querySelector("#letter-spacing").addEventListener("click",()=>{const e=document.querySelector("#letter-spacing");3===p?(p=0,e.querySelector(".acc-progress-parent").classList.add("hidden"),e.classList.add("active"),i.style.letterSpacing=""):(e.classList.remove("active"),0===p?(i.style.letterSpacing="0.1rem",e.querySelector(".acc-progress-parent").classList.remove("hidden"),e.querySelector(".acc-progress-child-1").classList.add("active"),e.querySelector(".acc-progress-child-2").classList.remove("active"),e.querySelector(".acc-progress-child-3").classList.remove("active")):1===p?(i.style.letterSpacing="0.2rem",e.querySelector(".acc