html, body {
  height: 100%;
  margin: 0;
}

main, header, footer,
#breadcrumb, #messages, #help {
  padding-left: clamp(5%, calc(20px + (50 - 20) * ((100vw - 500px) / 500)), 50px);
  padding-right: max(
    clamp(5%, calc(20px + (50 - 20) * ((100vw - 500px) / 500)), 50px),
    calc(50px + (100vw - 1000px) * 0.05)
  );
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > * {
  flex: 1;
  flex-grow: 0;
}

header {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

main {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

main > article {
  flex: 8;
  order: 3;
}

main > * {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main > aside.sidebar.first {
  flex: 2;
  order: 2;
  margin-right: 1rem;
}

main > aside.sidebar.second {
  flex: 2;
  order: 4;
  margin-left: 1rem;
}

footer {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

footer svg {
  display: inline;
}