/*                   Styles for a menu at the bottom of the page                                   bottomMenu53.css
                                  ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Note:  #menu  used (unfortunately) for a main menu at the top or side,  .Menu  for others

*/
/* ------------------------------------------------------------------------------------------------ variables -- */
/* Dimensions of main container (body or main or article) */
:root {
    --main-left: 55px ;
}
/* ============================================================================================ Document-wide == */
        nav.Menu:not(#menu) {
            margin: 5ex 0 6ex 0 ; padding: 0 0 0 var(--main-left) ;
            text-transform: lowercase ; line-height: 2.6rem ;
        }
          nav.Menu:not(#menu) ul { display: flex ; justify-content: center ; flex-wrap: wrap ; }
            nav:not(#menu) li {
              display: inline-block ; margin: 0 ; padding: 0 ;
              white-space: nowrap ; font-size: 1.05rem ; word-spacing: calc(2ch + 1vw) ;
            }
            nav.Menu:not(#menu) li::before { content: ':' ; }
            nav.Menu:not(#menu) li::after { content: ':' ; }

            nav.Menu:not(#menu) li.About, nav.Menu:not(#menu) li.Event { padding-left: 9ch ; }

              nav.Menu:not(#menu) li a { word-spacing: 1ch ; }
              nav.Menu:not(#menu) li a[data-target~="self"] { color: var(--mid-light) ; }

    article { margin: 0 auto 0 auto ; }
/* _____________________________________________________________________________________________________________ */