/* ┌─────────────────────────────╮
 * | Main Layout                 |
 * └─────────────────────────────╯*/
body { min-height: 100vh; margin: 0; display: flex; font-family: sans-serif }
#main { flex: 1; display: flex; flex-direction: column; align-items: stretch } /* Prepare for SlideContainer */
#header { position: relative }
#header a { text-decoration: none }
nav ul { list-style-type: none }
#content { flex: 1; box-sizing: border-box; margin: 0 auto; padding: 30px 30px 100px 30px; width: clamp(200px, 100%, 1100px); }


/* ┌─────────────────────────────╮
 * | Mobile Menu                 |
 * └─────────────────────────────╯*/

/* Slide Container */
.slideContainer { display: flex; width: 100% }
.slideContainer > #mobileMenu { position: fixed; top: 0; left: 0; min-width: 200px; max-width: 200px; height: 100vh }
.slideContainer > #mobileMenu { transform: translateX(-200px) } /* Hide menu by default.*/

/* Button */
#mobileMenuButton { position: fixed; z-index: 1; top: 0; right: 16px; padding: 10px 10px 2px 6px; line-height: .8;
	border-bottom-left-radius: 10px; background: var(--background); cursor: pointer; font-size: 30px; font-weight: bold }
@media (max-width: 768px) {	#mobileMenu { display: none } }
@media (min-width: 769px) {	#mobileMenuButton { display: none } }

/* Menu */
#mobileMenu ul { list-style-type: none; margin: 0; padding: 0 }
#mobileMenu ul ul { margin-left: 20px }
#mobileMenu ul a { display: block; padding: 10px 12px; text-decoration: none }


/* ┌─────────────────────────────╮
 * | Non-Mobile Top Menu         |
 * └─────────────────────────────╯*/
@media (max-width: 768px) { #topMenu { display: none } }
.drop-menu > ul > li a { display: block; padding: 10px 12px; text-decoration: none }
.drop-menu > ul { display: flex; align-items: center; white-space: nowrap } /* First Level */
.drop-menu > ul > ul { width: 300px; background: var(--background) } /* Second level */

.drop-menu li > a:not(:last-child):after  { content: ' ▼'; font-size: 70% }


/* ┌─────────────────────────────╮
 * | Content Text                |
 * └─────────────────────────────╯*/
#content { min-height: 10px }