@import 'breakpoints';
@import 'colors';
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
body {
color: $color-text;
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
max-width: $large;
main {
flex-grow: 1;
header, footer {
padding: 0 1rem;
header {
margin-top: 0.5rem;
nav {
font-size: 1.2rem;
padding: 1rem;
footer {
margin-bottom: 0.5rem;
align-items: end;
@media screen and (min-width: $small) {
align-items: normal;
justify-content: end;
:not(:first-child) {
margin: 0.5rem 0 0 0;
flex-direction: row;
margin: 0 0 0 1rem;
a {
color: currentColor;
text-decoration: none;
&:hover {
text-decoration: underline;
&.is-active {
color: $color-highlight;
:where(h1, h2, h3, h4, h5, h6, p) + :where(h1, h2, h3, h4, h5, h6, p) {
margin-top: 1rem;
p + p {