inside */ min-height: 100%; position: relative; display: flex; flex-flow: column; } #content { /* must exist as first

inside #container */ font-family: 'Roboto Slab', helvetica, san-serif; text-align: center; width: 100%; margin: 0 auto; background-color: white; flex-grow: 1; } span.avoid-wrap { display: inline-block; } /* CSS applying to the header section */ header a { color: inherit; text-decoration: none; } div.upper { width: auto; color: white; background-color: var(--menu-red); padding: 15px; display: flex; font-family: roboto-slab, serif; /* font-size: 14px; */ /* font-weight: 500; */ } div.upper h6 { font-family: proxima-nova, sans-serif; font-size: 1em; font-weight: 400; /* height: 19px; */ margin: 0; } div.logo { text-align: center; width: fit-content; } #large-logo img { /* width: 200px; */ height: 2.2em; } #small-logo img { /* width: 63px; */ width: 4em; } .compact-menu-button { /* width: 54px; */ width: 1.5em; background-color: var(--menu-red); /* font-size: 38px; */ font-size: 2.4em; text-align: center; } .upper-menu-container { flex-grow: 1; display: flex; justify-content: right; } .upper-menu-container nav { flex-grow: 1; } div.lower { background-color: var(--menu-gray); font-family: montserrat, sans-serif; /* font-size: 14px; */ font-weight: 500; } header ul { list-style: none; margin: auto; display: flex; text-align: left; flex-grow: 1; } #upper-menu { /* an unordered list

*/ justify-content: center; padding: 0; } header li { box-sizing: border-box; padding: 10px; margin-right: 15px; } li.border { /* Add an oval border to a menu item */ border: solid white 1px; border-radius: 2em; } li.colored { /* Change the colors of a menu item */ color: var(--menu-blue); background-color: white; } li.dropdown-menu { /* holds space so the layout doesn't jump when "turned on" (see next) */ border-bottom: solid transparent 2px; } li.dropdown-menu:hover { /* put a red line under the "header entry" */ color: var(--menu-red); border-bottom: solid var(--menu-red) 2px; } li.dropdown-menu ul { color: black; display: block; padding-left: 20px; background-color: var(--menu-gray); margin-top: 12px; } li.dropdown-menu ul li:hover { color: var(--menu-red); } .dropdown-content { position: absolute; box-shadow: 2px 2px 5px darkgrey; border-radius: 5px; height: fit-content; transform: scaleY(1); transform-origin: top; transition: transform 0.25s ease; } .dropdown-content li { text-align: left; } .hidden { height: 0px; /* animation */ transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } span.toggle { /* The span that containes the "expand/contract symbol" */ float: right; pointer-events: none; font-size: 1.6em; } /* CSS applying to the main section*/ main { text-align: left; padding: 15px; } main a { color: inherit; } /* CSS applying to the footer section */ #theme-footer { align-items: center; justify-content: center; /* background-color: #eae6e6; */ background-color: var(--menu-gray); color: #515354!important; display: block; font-size: 14px; letter-spacing: .25px; line-height: 20px; margin: 0; padding: 5px 15px; position: relative; text-align: center; } #theme-footer img { height: auto; /* max-width: 375px; */ max-width: 27em; width: 100%; } div.council-name { font-family: proxima-nova,sans-serif; /*font-size: 24px;*/ font-size: 1.7em; letter-spacing: normal; /* padding: 4px 0 24px; */ padding: .17em 0 1em; } hr { background-color: white; color: white; height: 1px; max-width: 85%; margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1); } /* Large format, i.e. desktop and laptop */ @media (min-width: 1000px) { /* Header CSS */ #small-logo { display: none; } .compact-menu-button { display: none; } .dropdown-menu:hover .dropdown-content{ /* display: flex; */ height: fit-content; transform: scaleY(1); } span.toggle { display: none; } } /* Small format, i.e. phones and small tablets */ @media (max-width: 999px) { /* Header CSS */ #large-logo { display: none; } #upper-menu { display: none; flex-grow: initial; margin: initial; } #upper-menu li { text-align: center; margin-top: 5px; } #lower-menu { justify-content: left; display: none; } .dropdown-content { position: initial; /* transform: scaleY(1); */ /* translate: 150px -20px; */ } /*.hidden { height: 0px; transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; }*/ li.dropdown-menu:hover { border-bottom: solid transparent 2px; } .dropdown-menu:hover .dropdown-content{ } }