input#navbf {    display:none; }
/* --- */

:focus-visible { outline: 4px solid rgb(0,0,0); outline-offset: 10px; color: rgb(0,0,0) !important; background: rgb(255,255,255) !important; }


/* --- */

a.sr-bf:link {  position: fixed; z-index:100; top: 50px; left: -1000px; overflow: hidden; }
a.sr-bf:focus { position: fixed; z-index:100; top: 50px; left: 20px; overflow: hidden; outline: 4px solid rgb(0,0,0); outline-offset: 10px; }


/* --- */


#bf {               position: fixed; z-index:100; top: 3rem; left: 0.5rem; overflow: hidden;
                    min-width: 60px; margin: 0; padding: 0; 
                    background: var(--m255); border: 0/*3px solid var(--m200)*/; border-radius: 20px; 
                    display: inline-flex; flex-direction: column;
                    align-content: flex-start; flex-wrap: wrap; }


label.navbf {       cursor: pointer; }
label.navbf img {   width: 40px; margin: 12px 12px 7px 12px; }


.bfo {                position: absolute; left: 0; overflow: hidden; list-style-type: none; 
                      display: flex; align-items: center; flex-direction: column; }

ul.bfo li {           margin: 0; padding: 0; 
                      width: 100%; white-space:nowrap; }

.bfo a, 
.bfo button {         margin: 0; padding: 20px 10px; width:auto; 
                      color: var(--m82); text-align:left; text-decoration: underline; 
                      background: var(--tr); border:none;  
                      display: flex; align-content: flex-start; flex-wrap: wrap;}
.bfo a img, 
.bfo button img {     width: 25px; margin-right: 20px; }


.bfo {                                 max-height: 0; width: 70px;  }                        /* close */

input[type="checkbox"]:checked ~ .bfo, 
button.navbf:focus ~ .bfo,
.bfo:focus-within {                    position: static; 
                                       max-height: 420px; margin: 0 20px; padding: 0; 
                                       width: auto; overflow: visible; transition: 2s all; } /* open */