body { 
    padding-bottom: 5rem; 
    background: white; color: black;
    .dark & {
        background: #333333; color: #EEEEEE;
    }
}

header { 
    display: grid; grid-template-columns:auto 1fr auto; column-gap: 2rem; padding: 0; color: var(--aruka-orange); background: black; align-items: center; 
    position: sticky; top:0; left:0; right:0; z-index:1000000;
    img { max-height: 35px; margin:1rem; }
    nav { display: flex; align-items: stretch; gap: 0; &>* { padding: 1rem; }}
    #sub-nav { grid-column: 1 / 4; width: 100%; background: #555; color:white; }
}

#subheader { 
    padding: 1rem; background: #ccc; color: black; 
    .dark & { background: #444; color: white; }
}


nav#top-nav { 
    margin-left: 4rem;
    a { color: white; text-transform:uppercase; display:block; background: transparent; line-height: 2rem; 
        &:hover { text-decoration: none; background: var(--aruka-orange);  }
        &.active { background: var(--aruka-orange); pointer-events: none; }
      }
}
nav#user-nav {
    color: white; 
    .user-name { font-size: 0.9rem; text-transform: uppercase; line-height: 1rem; }
    .user-type { font-size: 0.7rem; text-transform: capitalize; line-height: 0.8rem; }
    a { color: white; background: var(--aruka-orange); text-transform:uppercase; line-height: 2rem; 
        &:hover { text-decoration: none; background: white; color:black; }
        &.active { background: var(--aruka-orange); pointer-events: none; }
      }
}
nav#sub-nav {
    a { 
        color: white; 
        &:hover { background: white; color: black; text-decoration: none; }
        .dark &:hover { background: #ccc; }
        &.active { background: white; color: black; pointer-events: none; }
        .dark &.active { background: #ccc; }
    }
    & > div { background: #333; color: white; text-transform: uppercase; font-weight: 500; }
}

main { max-width: 1200px; margin: 1rem auto; }

footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 1rem; background: #000a; backdrop-filter: blur(3px); transition: background-color 0.25s; color: white; z-index: 1000; &:hover { background: #000; }}