/*
 * Rodapé fixo na base da viewport (sticky footer).
 * Em páginas de conteúdo curto o #footer encosta na borda inferior;
 * em páginas longas segue naturalmente após o conteúdo.
 * Carregado por último no <head> para prevalecer sobre style.css.
 */
html {
    height: 100%;
}

body {
    min-height: 100%;
}

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

/* O footer é empurrado para baixo quando sobra espaço. */
body .body-inner > #footer {
    margin-top: auto;
}