| body { |
| --header-height: 64px; |
| --promotion-bar-height: 35px; |
| --footer-height: 104px; |
| --footer-gap: 60px; |
| |
| @media (min-width: 451px) and (max-width: 850px) { |
| --header-height: 111px; |
| } |
| |
| padding: 0; |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| background-color: var(--body-background); |
| font-family: 'Open Sans',sans-serif; |
| |
| &>section { |
| flex: 1; |
| } |
| } |
| header { |
| position: -webkit-sticky; |
| position: sticky; |
| top: 0; |
| z-index: 2; |
| } |
| body > footer { |
| margin: var(--footer-gap) 30px 0; |
| } |
| * { |
| box-sizing: border-box; |
| } |