content {
  display: flex;
  flex-direction: column;
}

/* mvp.css aleady has a nav so using this 
name to demonstrate how to make your own. */
nav-bar {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;

  /* this is just for displaying here */
  padding: 1em;
  border: 1px solid var(--color-accent);
  margin-bottom: 1em;
}

nav-bar middle {
  display: flex;
  flex: 2;
  justify-content: center;
  padding-left: 1em;
  padding-right: 1em;
}

nav-bar middle input {
  width: 100%;
}

.alternate {
  background-color: #ddd;
}