/** TOP MENU **************************************************************************************/

.nav { white-space: nowrap; margin: 0; padding: 0 }
.nav a { text-decoration: none }

.nav > ul > li { background: transparent; color: #d6d6c2; font-size: 18px; padding-left: 7px; padding-right: 7px }
.nav > ul > li:hover { background: #555; color: #fff }
.nav > ul > li:focus-within { background: #555; color: #fff }

.nav ul { background: #555; list-style: none; margin: 0; padding: 0; font-size: 15px; text-align: left }

.nav li { color: #fff; background: #555; display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: .5s }
.nav li a { color: #fff; display: block }
.nav li:hover { background: #333; cursor: pointer }
.nav li:focus-within { background: #333; cursor: pointer }
.nav li:focus-within a { outline: none }

.nav ul li ul { background: orange; visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all .5s ease; margin-top: 1rem; left: 0; display: none }
.nav ul li:hover > ul { visibility: visible; opacity: 1; display: block }
.nav ul li:focus-within > ul { visibility: visible; opacity: 1; display: block }
.nav ul li ul:hover { visibility: visible; opacity: 1; display: block }
.nav ul li ul:focus { visibility: visible; opacity: 1; display: block }

.nav ul li ul li { clear: both; width: 100% }

#popupmenu li:last-of-type ul.dropdown { margin-left: -100% }

dialog::backdrop { opacity: .5; backdrop-filter: blur(10px) }
dialog { border: 1px #fff solid; border-radius: 3px; box-shadow: 0 4px 5px rgb(0 0 0 / 30%); font-size: 1.25em; padding-top: .25em; max-width: 1000px }
dialog form { display: grid; grid-template-rows: auto 1fr auto; grid-gap: .5em }
dialog header { text-align: right }
dialog header button { background: white; border: none; font-size: 2em }
dialog h2 { font-size: 1.5em; margin: 0; opacity: .75 }
dialog div { text-align: left; margin: 0 auto }
dialog div p { margin: .25em 0 1.25em }
dialog footer { text-align: center }
dialog footer button { min-width: 80px; font-size: 1em }
dialog button:hover { color: blue }