.accessibility-invert { filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter); } #accessibility-captions-box { padding: 0.5rem; font-size: 1.6rem; position: fixed; bottom: 0; left: calc(15% - 0.5rem); pointer-events: none; background-color: black; width: 70%; margin: 0 auto; visibility: hidden; opacity: 0; text-align: center; transition: visibility var(--transition-duration), opacity var(--transition-duration); border-radius: 0.5rem 0.5rem 0 0; } #accessibility-captions-box.visible { visibility: visible; opacity: 0.9; } #accessibility-quicknav { visibility: hidden; position: absolute; padding: 0; } #accessibility-quicknav.visible { visibility: visible; } #accessibility-quicknav-container, #accessibility-quicknav-container > section, #accessibility-quicknav-container > section > ul { height: 100%; max-height: inherit; } #accessibility-quicknav-container > section > ul { display: flex; flex-direction: column; } #accessibility-quicknav-container > section > ul > li { flex-grow: 1; } #accessibility-quicknav-container > section > ul > li > label { height: 100%; display: flex; flex-direction: column; justify-content: center; }