/*
  MENU ACESSIBILIDADE v 1.1;
  05/2023;
  João Diogo Pereira;
*/

.acessibility__btn{
    cursor: pointer;
    position: relative;
    z-index: 99;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all .3s ease-in-out;
}

.acessibility__btn:hover, .acessibility__btn.active{
    background-color: var(--purple-to-light);
}

.acessibility__btn svg{
    width: 23px;
}

.acessibility__btn svg path{
    fill: var(--purple-to-light);
    transition: all .3s ease-in-out;
}

.acessibility__btn:hover svg path, .acessibility__btn.active svg path{
    fill: var(--light-to-purple);
}

.acessibility__container{
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    transform: translateX(300px);
    background: var(--yellow);
    overflow: auto;
    height: fit-content;
    max-height: 100vh;
    border-bottom-left-radius: 25px;
    z-index: 98;
    transition: transform .3s ease-in-out;
}

.acessibility__container.active{
    transform: translateX(0);
}

.acessibilty__menu__options{
    margin:0;
    padding: var(--headerSize) 0 1.5rem 0;
}

.acessibilty__menu__options li{
    list-style: none;
    background-color: transparent;
    transition: all .3s ease-in-out;
}

.acessibilty__menu__options li:hover, .acessibilty__menu__options li.active{
    background-color: var(--purple);
}

.acessibilty__menu__options a{
    display: inline-block;
    color: var(--purple);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    width: 100%;
    padding: .5rem 3rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.acessibilty__menu__options li:hover a, .acessibilty__menu__options li.active a{
    color: var(--white);
}

.font2__on {
    --fontFamily: Verdana, Arial, Helvetica, sans-serif;
}

.text__up__1 {
    --fontSize: 1px;
}

.text__up__2 {
    --fontSize: 2px;
}

.text__up__3 {
    --fontSize: 3px;
}

.text__up__4 {
    --fontSize: 4px;
}

.underlineURL__on a{
    --textDecoration: underline;
    --textDecorationColor: initial;
}

.grayscale__on {
    filter: grayscale(100%);
}

.contrast__on {
    color-scheme: dark;
}