:root{
    --bg: #000;
    --font-color: #ffffff;
    --primary: #d44c5b;
    --accent: #691922;
    --active: #1a731c;
    --action-background: #0a1423;
    --gap: 90px;
}

body {
    position: relative;
}

.high-contrast-mode .accessibility-panel {
    --primary: #fff7eb;
    --font-color: #ffffff;
    --accent: #d0a566;
}

.accessibility-panel {
    z-index: 1100;
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: end;
}

.accessibility-panel .accessibility-toggle {
    border: none;
}

.high-contrast-mode .accessibility-panel .accessibility-toggle {
    color: #000;
}

.accessibility-panel button {
    font-size: 1rem;
    border-radius: 50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    user-select:none;
    background:var(--primary);
    color:inherit;
    box-shadow:0 6px 20px rgba(2,6,23,0.5);
    aspect-ratio: 1;
    width: 4rem;
    padding: 1rem;
    border: 0.2rem solid var(--action-background);
}

.accessibility-panel .actions button {
    background-color: var(--action-background);
}

.accessibility-panel button.active {
    background:var(--active);
}

/*.accessibility-panel button:hover,*/
/*.accessibility-panel button:focus {*/
/*    background-color: var(--accent);*/
/*}*/

.accessibility-panel .accessibility-toggle {
    margin-right: 1rem;
    padding: 1.1rem;
    color: var(--font-color);
}
.accessibility-panel .accessibility-toggle:focus,
.accessibility-panel .accessibility-toggle:hover {
    background-color: var(--accent);
}

.accessibility-panel .actions {
    display: none;
}

.accessibility-panel .actions button:focus,
.accessibility-panel .actions button:hover {
    border: 0.2rem solid var(--accent);
}

.accessibility-panel .accessibility-toggle.active + .actions {
    gap: 0.5rem;
    display:grid;
    left: 100%;
    bottom: 0;
}

.accessibility-panel .actions .accessibility-action {
    color: var(--font-color);
    aspect-ratio: unset;
    display: flex;
    gap: 0.5rem;
    width: auto;
    border-radius: 0.5rem;
}
.accessibility-panel .actions .accessibility-action .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

@media screen and (min-width: 1280px) {

    .accessibility-panel {
        align-items: center;
    }

    .accessibility-panel .accessibility-toggle.active + .actions {
        display:flex;
        top: 0;
        bottom: 0;
    }
}