.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; }

.wrapper > * {
  padding: 10px;
  flex: 1 100%; }

.header {
  padding: 0px;
  margin: 1px;
  background: #1a1a1a; }

.footer {
  font-family: Arial, Helvetica, sans-serif;
  background: #1a1a1a;
  color: #4d4d4d;
  font-weight: bolder;
  /*background: lightgreen;*/ }

.main {
  text-align: left;
  /*background: deepskyblue;*/ }

.footer .small {
  color: #333333; }

.footer .small a {
  color: #333333; }

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

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px; }
  .aside-1 {
    order: 1; }
  .main {
    order: 2; }
  .aside-2 {
    order: 3; }
  .footer {
    order: 4; } }

body {
  padding: 0px;
  margin: 0px;
  background-color: #000;
  /*color: lightgray;*/ }