@charset "utf-8";
/* CSS Document */

.layout {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.layout > * {
  flex: 1 100%;
}

aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: left;
  flex-flow: column wrap;
}
 
aside a {
  text-decoration: none;
  display: block;
  padding: 0.2em;
  color: black;
}
 
aside a:hover {
  text-decoration: none;
  display: block;
  color: violet;
}

.left li {
  margin-bottom: 10px;
}
 
.left li:first-of-type {
  margin-top: 10px;
}

@media all and (min-width: 600px) {
  .left {
     flex: 1 auto;
  }
}

@media all and (max-width: 800px) {
  .left li {
    border: 0;
    margin-bottom: 2px;
    width: 100%;
    height: 20px;
  }
  .left li:first-of-type {
    margin-top: 5px;
  }
}
 
@media all and (min-width: 800px) {
  .content {
    flex: 7 0px;
    order: 2;
  }
 
  .left {
    order: 1;
  }
 
}

#chart-container {
    width: 100%;
    height: auto;text-align: center;margin: auto;
}