#accessibiltyBarWrapper {
    width: 100%;
    height: 507px;
    position: fixed;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;
    font-size: 20px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    z-index: 100000;
}

    #accessibiltyBarWrapper aside.colorContaiers {
        height: 79.7%;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

        #accessibiltyBarWrapper aside.colorContaiers div {
            position: absolute;
            width: 197px;
            z-index: 10000;
            border: solid;
            display: none;
            text-align: center;
            color: #000000;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            pointer-events: visible;
        }

#accessibilityBar {
    background-color: #ffff4d;
    color: #000000;
    font-weight: 700;
    width: 600px;
    height: 100px;
    border: solid;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: row;
    pointer-events: visible;
    margin-left: auto;
    margin-right: auto;
}

    #accessibilityBar aside {
        width: 200PX;
    }

        #accessibilityBar aside span.fontSize {
            font-size: 1.4em;
        }

        #accessibilityBar aside.fontButtonContainer {
            text-align: center;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: column;
        }

        #accessibilityBar aside aside {
            text-align: center;
            flex: 1;
            text-decoration: none;
            color: black;
            cursor: pointer;
        }

#fontButtons {
    border-right: solid;
}

#backgroundChanger {
    text-align: center;
    cursor: pointer;
}

#textChanger {
    cursor: pointer;
    text-align: center;
    border-left: solid;
}

#backgroundColourPicker {
    margin-left: 200px;
}

#colourPicker {
    margin-left: 400px;
}

#backgroundColourPicker > span {
    width: 100%;
    height: 40px;
    display: inline-block;
    cursor: pointer;
}

#colourPicker > span {
    width: 100%;
    height: 40px;
    display: inline-block;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #accessibilityBar {
        width: 450px;
    }

        #accessibilityBar aside {
            width: 150px;
        }


    #accessibiltyBarWrapper aside.colorContaiers {
        width: 450px;
    }

        #accessibiltyBarWrapper aside.colorContaiers div {
            width: 147px;
        }

    #backgroundColourPicker {
        margin-left: 150px;
    }

    #colourPicker {
        margin-left: 300px;
    }
}

@media screen and (max-width: 512px) {
    #accessibilityBar {
        width: 330px;
    }

        #accessibilityBar aside {
            width: 110px;
        }


    #accessibiltyBarWrapper aside.colorContaiers {
        width: 300px;
    }

        #accessibiltyBarWrapper aside.colorContaiers div {
            width: 107px;
        }

    #backgroundColourPicker {
        margin-left: 95px;
    }

    #colourPicker {
        margin-left: 205px;
    }
}

@media screen and (max-width: 384px) {
    #accessibilityBar {
        width: 240px;
        font-size: 0.77em;
        word-wrap: break-word;
    }

        #accessibilityBar aside {
            width: 80px;
        }

            #accessibilityBar aside span.fontSize {
                font-size: 1.8em;
            }

    #accessibiltyBarWrapper aside.colorContaiers {
        width: 240px;
    }

        #accessibiltyBarWrapper aside.colorContaiers div {
            width: 77px;
        }

    #backgroundColourPicker {
        margin-left: 80px;
    }

    #colourPicker {
        margin-left: 160px;
    }
}