html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    display: flex;
    flex-direction: column; /* makes children of the body stack vertically */
    min-height: 100vh; /* makes the body always at least as tall as the viewport */
}


#content {
    -webkit-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1; /* makes this element expand to fill available space, pushing the footer down */
}

footer {
    -o-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0; /* prevents the footer from shrinking if there's not enough space */
}