body {
  height: 100dvh;
}

pos-router {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

pos-navigation {
  max-width: var(--width-lg);
  margin: 0;
  min-width: var(--size-32);
  flex-shrink: 1; /* Ensure navigation can shrink */
}

pos-add-new-thing,
pos-login {
  flex: 0 1 auto;
  flex-shrink: 0; /* Ensure those items don't shrink */
}

header,
footer {
  display: flex;
  gap: var(--size-1);
  height: auto;
  justify-content: center;
  align-items: center;
  padding: var(--size-1);
}

footer svg {
  width: var(--size-5);
  height: var(--size-5);
}

footer {
  font-size: var(--scale-fluid-000);

  .settings {
    padding: 0 var(--size-1);
    text-decoration: none;
    background-color: var(--pos-background-color);
    border: 1px solid var(--pos-secondary-border-color);
    color: var(--pos-secondary-border-color);
    border-radius: var(--radius-xs);

    &:hover {
      background-color: var(--pos-secondary-border-color);
      color: var(--pos-background-color);
    }
  }
}

header {
  flex-wrap: nowrap;
  padding: var(--size-1) var(--size-8);
}

main {
  flex: 1;
  max-height: 100vh;
  overflow: auto;
}

@media (max-width: 640px) {
  header {
    padding: var(--size-1);
    justify-content: space-between;
  }
  footer {
    display: none;
  }
}