/* Shadow */
nav div.menu > span {text-shadow: 0 0 10px light-dark(white, transparent);}

/* NAV */
/* Text Color */
nav a, nav li             {color: var(--col-tx)}
nav ul > a:hover,
nav ul > li:hover         {color: var(--col-tx-hi)}
nav      li:hover,
nav      li:hover > a,
nav div.menu:hover > a,
nav div.menu:hover > span  {color: var(--col-tx-hi);}
/* Backgrounds */
nav div.menu                    {background: var(--col-bg-button);}
nav div.menu:hover,
nav div.menu li:hover           {background: var(--col-bg-select)!important;}
header nav div.menu:hover       {background: var(--col-bg-select);}
nav div.menu li:nth-child(odd)  {background: var(--col-bg-menu-o);}
nav div.menu li:nth-child(even) {background: var(--col-bg-menu-e);}
/* Borders */
nav div.menu { border-top: 3px solid var(--col-bd-button); }
nav ul {
  border-top:    1px solid var(--col-bg-select);
  border-left:   1px solid var(--neutral);
  border-right:  1px solid light-dark(var(--darkest), var(--darkest));
  border-bottom: 1px solid light-dark(var(--dark),    var(--dark));
}

/* Shadows */
nav li:hover      {box-shadow: -1px  0px  5px 0px #11177;}
nav li:hover > a  {text-shadow: 0 0 4px  var(--col-ts);}
@media (max-width: 500px) {
  nav div.menu:hover {box-shadow: 15px 0 15px 0px var(--col-ts);}
}
@media (min-width: 500px) {
  nav div.menu:hover {box-shadow: 0 -15px 15px 0px var(--col-ts);}
}