* {
  box-sizing: border-box; 
}

body {
  background-color: #382f57;
  font-family: Georgia, serif;
  color: white;
  letter-spacing: 1px;
  text-align: left;
}
  
h1,
h2,
h3 {
  text-align: center;
  letter-spacing: 3px;
}

h1 {
  line-height: 0.7;
}

h2 {
  opacity:0.8;
}

h3 {
  opacity:0.6;
}

a {
  text-decoration: none;
  font-style: italic;
  color: white;
}

.box {
  padding: 10px; 
  background-color: #1a1329;
  opacity: 0.5;
  border-radius: 5px 5px 0 0;
}

#container {
  max-width: 900px;
  margin: 0 auto;
}

#flex {
  display: flex;
}

/*  background-color: #1a1329; */
main {
  background-color: #1a1329;
  flex: 1;
  padding: 20px;
  order: 2;
}

aside {
  width: 200px;
  padding: 20px;  
  background-color: #63518f;
  font-size: smaller;
}

#leftSidebar {
  order: 1;
}
            
th, td {
  border-style: none;
  padding: 10px;
}

.inline {
  display: inline;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }
  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

}