.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.modal-content {
  font-size: 140%;
}

main {
  flex: 1;
}

footer {
  padding: 1em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.light {
  color: #ddd;
}
.dark {
  color: #666;
}

/* from http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
.ratio-1by1 {
  position: relative;
}
.ratio-1by1:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.ratio-1by1>* {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.modal-content {
  font-size: 140%;
}

main {
  flex: 1 0 auto;
}

footer {
  padding: 1em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.light {
  color: #ddd;
}
.dark {
  color: #666;
}

/* from http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
.ratio-1by1 {
  position: relative;
}
.ratio-1by1:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.ratio-1by1>* {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Fix an IE related bug
Fix an IE related bug

Now the footer is always on the bottom of the page
