.container-accessible-version {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: var(--blocks-padding, 0px 5.7% 0px 5.7%);

    font-size: var(--nav-items-font-size);
    color: var(--color-text-primary);
}

#switch-accessible-version {
    display: block;
    width: 100%;
    height: fit-content;
    max-width: var(--blocks-max-width, 1800px);
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: center;

    background-color: var(--color-transparent);
}

#switch-accessible-version button {
    cursor: pointer;
}

#button-accessible-version {
    font-size: inherit;
    padding: 7px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--color-transparent);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
}

#button-accessible-version svg {
    width: var(--nav-items-font-size);
    height: var(--nav-items-font-size);
}

#button-accessible-version:hover {
    background-color: var(--background-color-accent);
    color: var(--color-text-secondary);
    text-decoration: underline;
}

#button-accessible-version:hover svg {
    fill: var(--color-text-secondary);
}

#button-accessible-version.open {
    border: 1px solid var(--color-text-accent);
}

.menu-accessible-version {
    font-size: inherit;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    transform: translateX(10%);
    opacity: 0;
    transition:
        transform 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    z-index: -100;
}
.menu-accessible-version.visible {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
}
.menu-accessible-version button {
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--color-transparent);
    border-radius: 100%;
    transition: all 0.3s;

    background-color: var(--color-secondary);
}

.menu-accessible-version button:hover {
    border-color: var(--color-text-accent);
}

#menu-font-size-accessible-version button.check,
#menu-color-accessible-version button.check {
    border-bottom: 4px solid var(--color-accent);
}

#menu-font-size-accessible-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

#menu-font-size-accessible-version button:first-child img {
    width: 15px;
    height: 15px;
}
#menu-font-size-accessible-version button:nth-child(2) img {
    width: 18px;
    height: 18px;
}
#menu-font-size-accessible-version button:last-child img {
    width: 22px;
    height: 22px;
}


#menu-color-accessible-version {
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
#menu-color-accessible-version button img {
    padding: 0;
    width: 100%;
    border-radius: 100%;
    background-size: cover;
}
#menu-color-accessible-version button:nth-child(2) img {
    border: 1px solid black;
}
#menu-color-accessible-version button:nth-child(4) img {
    border: none;
    background-color: #138;
}