/* set correct box model */
* {
    box-sizing:border-box;
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin:0rem;
}
  
.bordered {
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
}

.fit img {
  width: 100%;
  height: auto;
}

.centered {
  text-align: center;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
  padding:1rem;
}

/* background colors */
.holy-grail-flexbox > .header {background:#e38410}
.holy-grail-flexbox > .main-content {background:#fff}
.holy-grail-flexbox > .left-sidebar {background:#f5d55f}
.holy-grail-flexbox > .right-sidebar {background:#c5ed77}
.holy-grail-flexbox > .footer {background:#72c2f1}

/* tablet breakpoint */
@media (min-width:768px) {
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    width:50%;
  }
}

/* desktop breakpoint */
@media (min-width:1024px) {
  .holy-grail-flexbox > .header {
    order:-2; /* header first */
  }
  .holy-grail-flexbox > .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .holy-grail-flexbox > .main-content {
    width:50%;
  }
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    width:25%;
  }
}