@media all {
    /* for off screen HTML that still needs to be read as part of the flow */
    .off_screen { position:absolute !important; height:1px; width: 1px; overflow:hidden; clip:rect(1px 1px 1px 1px); clip:rect(1px, 1px, 1px, 1px); }

    /*-- general WCAG --*/
    :focus { box-shadow:0 0 10px 0 #0888ca; }

    input:focus,
    select:focus,
    textarea:focus { border:4px #191a1c solid !important; }

    a:not(.link_as_button):focus { text-decoration:underline !important; padding:4px 10px; }
    a.link_as_button:focus { text-decoration:underline !important; border-radius:0px; }

    /*-- on-demand links --*/
    a.link_on_focus_only { top:0px; left:-9999px; position:absolute; overflow:hidden; z-index:-999; }
    a.link_on_focus_only:focus,
    a.link_on_focus_only:active { color:var(--color-white); background-color:var(--color-black);  top:50px; left:0px; margin:0px; padding:14px 20px; text-align:center; font-weight:400; z-index:99999; text-decoration:underline; line-height:1; }  

    /* start accessibility */
    #accessibility h2 { font-size:1.4rem; }
    #accessibility ul.option_list { margin:0px; padding:0px; list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); column-gap: 20px; row-gap: 20px; }
    #accessibility ul.option_list li { margin:0px; padding:0px; list-style:none; text-align:center; border:1px #c9c9c9 solid; background-color:#FFFFFF !important; }
    #accessibility ul.option_list li a { display:block; padding:20px 2px; }

    #accessibility .color_box { margin-top:40px; }

    #font_list li a { color:#111111 !important; }
    #font_list li:nth-child(1) a { font-size:18px !important; }         /* 100% */
    #font_list li:nth-child(2) a { font-size:22.5px !important; }       /* 125% */
    #font_list li:nth-child(3) a { font-size:27px !important; }         /* 150% */
    #font_list li:nth-child(4) a { font-size:31.5px !important; }       /* 175% */
    #font_list li:nth-child(5) a { font-size:36px !important; }         /* 200% */

    #color_list .default_style { color:black !important; background-color:white !important; }

    #color_list .yellow_style_1 { color:yellow !important; background-color:blue !important; border-color:blue !important; }
    #color_list .yellow_style_2 { color:yellow !important; background-color:black !important; border-color:black !important; }

    #color_list .green_style_1 { color:green !important; background-color:white !important; }

    #color_list .white_style_1 { color:white !important; background-color:black !important; border-color:black !important; }
    #color_list .white_style_2 { color:white !important; background-color:gray !important; border-color:gray !important; }
    #color_list .white_style_3 { color:white !important; background-color:darkred !important; border-color:darkred !important; }
    /* end side accessibility */
}

@media (max-width:1000px ){
    #accessibility ul.option_list { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:500px ){
    #accessibility { text-align:center; }
    #accessibility ul.option_list { display:block; }
    #accessibility ul.option_list li { margin-bottom:20px; }
}