:root {
  --bg: #dddddd;
  --top-bg: #fefef2;
  --nav-bg: #c22de1;
  --footer-bg: #dddd22;
}

html,
body {
  min-height: 100vh;
  overflow: hidden;
}

body {
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
}

/* wrap child element's margin  */
header,
nav,
main,
footer {
  overflow: hidden;
}

header {
  display: flex;
  background-color: var(--top-bg);
}

header > #profile {
  flex-grow: 1;

  display: flex;
  align-items: center;
}

  #profile > p {
    flex-grow: 1;
    text-align: center;
  }

#container {
  display: flex;

  flex-grow: 1;
}

  #container > nav {
    flex-basis: 16rem;
    text-align: center;
    background-color: var(--nav-bg);
  }

  #container > main {
    flex-grow: 1;

    padding: 1rem;
  }

footer {
  text-align: center;
  background-color: var(--footer-bg);
}