body{
  font-family: maple mono;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url(milkoutside.jpg);
  color: white;
  image-rendering: pixelated;
  margin-top: 10px
  overflow;
}

.felpititulo{
  display: block;
  height: 150px;
  margin: auto;
}
  
.principal{
  display: flex;
  margin: auto;
  background: transparent;
  max-width: 50%;
  height: 1000px;
}
  
.mainboard{
  display: flex;
  background-color: rgba(0, 0, 0, 0.7); 
  width: 70%;
  height: 900px;
  border: 2px solid #fff;
  border-right: 0px;
}

.fotinha{
height: 171px;
margin: 10px;
border: 2px solid #fff;

}

.nav{
  max-width: 170px;
  background-color: rgba(0, 0, 0, 0.7); 
  width: 30%;
  height: 900px;
  border: 2px solid #fff;
}

@media all and (min-width: 800px) {
  .mainboard {
    flex: 3 0;
  }
  .mainboard {
    order: 1;
  }
  .nav {
    order: 2;
  }
}
@media screen and (max-width: 900px) {
  #webamp {
    display: none !important;
  }
}
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }
  aside {
    width: 100%;
    text-align: left;
    margin: 2px;
  }
  main {
    order: 1;
  }
  #leftSidebar {
    order: 2;
  }
  #rightSidebar {
    order: 3;
  }
  #navbar ul {
    flex-wrap: wrap;
  }
}