:root {
  --extr-pad: 3em;
  --bttm-pad: 2em;
  --bttm-pad-chld: 1em;
  --bttm-pad-lst-chld: 0;
  --lft-rght-pad: 1.5em;
  --header-hght: 53px;
  --header-position: fixed;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}
body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

  .flx_clmn {display: flex; flex-direction: column;} .flx_row {display: flex; flex-direction: row;}
  .tp_bttm_pad {padding-top: 1em; padding-bottom: 1em;}
  .tp_pad {padding-top: 2em;}
  .bttm_pad {padding-bottom: var(--bttm-pad);}
  .bttm_pad_chld > * {padding-bottom: var(--bttm-pad-chld);}
  .bttm_pad_chld > *:last-child {padding-bottom: var(--bttm-pad-lst-chld);}
  .extr_tp_bttm_pad {padding-bottom: 3em;}

  .page_container {height: 100%;}
    header {position: var(--header-position, unset); top: 0; flex-grow: 0; width: 100%; min-height: var(--header-hght); z-index: 1; display: flex; justify-content: center; align-items: center;}
    header + * {padding-top: var(--dyn-header-hght, 0);} /* Remove if header not fixed */
    .main {flex-grow: 1;}
    .main > *:first-child:not(:empty) {padding-top: var(--extr-pad);}
    .main > *:last-child:not(:empty) {padding-bottom: var(--extr-pad);}
    .main > *:not(:first-child):not(:last-child):not(:empty) {padding-bottom: var(--bttm-pad);} /* The :not(first-child) relates only to the page main heading */
    header, .main, footer {padding-right: var(--lft-rght-pad); padding-left: var(--lft-rght-pad);}
    footer {flex-grow: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 1em; padding-bottom: 1em;}