nav#main-nav{display:flex;background:var(--navbg-color);width:100%;max-height:100px;position:fixed;top:0px;transition:all .3s ease-in-out;overflow-y:auto;z-index:1}@media screen and (max-width: 768px){nav#main-nav{margin-left:calc(0px - 100vw);width:100vw}nav#main-nav.open{margin-left:0!important}}nav#main-nav img{padding:1em 1em .5em}nav#main-nav h1{font-size:1rem;line-height:3rem;padding:0 1rem;margin:0}@media screen and (max-width: 768px){nav#main-nav h1{display:none}}nav#main-nav ul{display:flex;flex-grow:1;align-items:stretch;flex-direction:row;list-style:none;margin:0 2em 0 0;padding:0;gap:2em;font-size:1.2rem}@media screen and (max-width: 768px){nav#main-nav ul{margin-top:2.5em}}nav#main-nav ul li{display:flex;flex-direction:column;justify-content:center}nav#main-nav ul li.space{flex-grow:1}nav#main-nav ul li a{display:block;padding:.5em 1em;border-radius:.5em;background-color:var(--bg-color);text-align:left;color:var(--fg-color);text-decoration:none;min-width:8em}nav#main-nav ul li a:hover{background-image:radial-gradient(circle farthest-side at 50% 200%,rgba(172,172,92,.2) 50%,rgba(255,255,255,0))}nav#main-nav ul li a.logout-button{background-color:var(--brand-teal);color:#fff;font-weight:700}nav#main-nav ul li a.grape{background-color:var(--brand-grape);color:#fff;font-weight:700}body{height:calc(100% - 100px)}#container{flex-wrap:wrap;margin-top:100px;height:calc(100% - 100px)}