body { | |
--header-height: 64px; | |
--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; | |
} |