#nav{
  background-color: var(--green_2);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-areas: "main" "footer";
  grid-template-rows: 1fr min-content;
  height: 100vh;
  left: 0;
  max-width: calc(100vw * 0.9);
  overflow: hidden;
  position: fixed;
  transition: transform 0.3s ease;
  width: var(--aside_width);
  z-index: 100}
#nav.off{
  box-shadow: none;
  transform: translateX(calc(-1 * var(--aside_width)))}
  #close_nav_button{
    justify-self:end;
    grid-area: main;
    margin:var(--m_gap);
    z-index: 101}
  #nav > .main{
    border-bottom: 1px solid var(--green_3);
    box-sizing: border-box;
    display: grid;
    grid-auto-rows: min-content;
    grid-area: main;
    grid-gap: var(--m_gap);
    margin-top: var(--m_gap);
    padding: var(--m_gap)}
    .nav_item{
      align-items: center;
      background-color: var(--green_1);
      border-radius: var(--m_gap);
      box-sizing: border-box;
      color: var(--green_3);
      cursor: pointer;
      display: grid;
      grid-template-columns: min-content 1fr;
      grid-gap: var(--s_gap);
      padding:var(--m_gap);
      text-decoration: none;
      transition: var(--filter_transition)}
      .nav_item > svg{
        fill:var(--green_2);
        height: var(--xl_font);
        width: var(--xl_font)}
    .nav_item:hover:not([active]){
      color: var(--green_4);
      filter: var(--filter)}
    [active].nav_item{
      background-color: var(--yellow_1);
      color: white;
      font-weight: bold}
      [active].nav_item > svg{
        fill:white}
  #nav > .footer{
    box-sizing: border-box;
    display: grid;
    grid-area: footer;
    grid-auto-rows: min-content;
    grid-gap: var(--m_gap);
    text-align: center;
    font-size: var(--s_font);
    color: var(--green_3);
    padding: var(--l_gap)}
    #nav > .footer > div{
      color: var(--green_4);
      cursor: pointer;
      font-size: var(--m_font);
      line-height: 1.5}
    #nav > .footer > div > span:active,
    #nav > .footer > div > span:hover{
      color: var(--yellow_4)}