* {
  box-sizing: border-box;
}

body {
  margin: 1rem;
}

/* the "container" is what wraps entire website */

.container {
  max-width: 1500px;
  margin: 0 auto;
}

/* this fixes issue with content overflow*/
.content pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.content h1 {
  margin-top: 1rem;
}

.header {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.flex {
  display: flex;
  width: 100%;
}
aside {
  width: 300px;
  margin-left: 1rem;
}
main {
  flex: 1;
  padding: 1rem;
  order: 2;
}
.right-sidebar {
  order: 3;
}

.layout-main {
  flex: 1;
  order: 2;
}

.layout-header {
  width: 100%;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 800px) {
  .flex {
    flex-wrap: wrap;
  }
  aside {
    width: 100%;
    margin-top: 1rem;
    margin-left: 0;
  }
  main {
    order: 1;
  }
  .rightSidebar {
    order: 3;
  }
  .navbar ul {
    flex-wrap: wrap;
  }
}