$footer_height: 55px; $footer_margin: 20px; $footer_paddingtop: 15px; $footer_paddingbtn: 10px; $body_maxwidth: 650px; $color_green: #2dac01; $color_bgdark: #424242; html { box-sizing: border-box; } * { box-sizing: inherit; } body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; line-height: 1.5em; margin: 0; margin-bottom: $footer_height + $footer_margin + $footer_paddingtop + $footer_paddingbtn; background-color: #fff; color: #1f1f1f; @media (prefers-color-scheme: dark) { background-color: #1f1f1f; color: #fafafa; } } a { color: $color_green; @media (prefers-color-scheme: dark) { color: $color_green; } } .container { max-width: $body_maxwidth; margin-left: auto; margin-right: auto; @media all and (max-width: $body_maxwidth+2*8px) { margin-left: 8px; margin-right: 8px; } } .small { font-size: 0.8em; } html { box-sizing: border-box; position: relative; min-height: 100%; } h1, h2, h3, h4 { font-weight: 300; line-height: 1.2em; } p, li { line-height: 1.5em; } h1 { padding: 30px 0; font-size: 3em; text-align: center; @media all and (max-width: 450px) { padding: 15px 0; font-size: 2.2em; } a { text-decoration: none; } } main { margin-top: 50px; } footer { width: 100%; height: $footer_height; font-size: 0.8rem; margin-top: $footer_margin; padding-top: $footer_paddingtop; padding-bottom: $footer_paddingbtn; } footer .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; @media all and (max-width: 450px) { flex-direction: column; text-align: center; } } /* make footer sticky */ html { position: relative; min-height: 100%; } footer { position: absolute; bottom: 0; }