#ball {
  width: 8rem;
  height: 8rem;
  border-radius: 8rem;
  background-color: darkorchid;
  bottom: 50px;
  left: 50%;
  position: absolute;
  transition-property: bottom;
  transition-duration: 2s;
}

/* Need to work out a better way to include an optional grid element (bookmarks) without it impacting the layout of other pages but for now I'm overriding it and this will have to do */

/* Mobile-first design */
@media only screen and (max-width: 1000px) {
  #outer_container {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
      "header"
      "nav"
      "aside"
      "main";
  }
}

/* Larger screens / landscape */
@media only screen and (min-width: 1000px) {
  #outer_container {
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-areas:
      "header header"
      "nav aside"
      "nav main";
  }
}