* {
box-sizing: border-box;
}
body {
font-family: 'Libre Baskerville', serif;
color: #2e2e2e;
margin: 0 auto;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
justify-content: center;
align-items: center;
}
h1, h2, h3 {
font-family: 'Source Sans Pro', sans-serif;
color: #aeaeae;
}
h1 {
font-size: 3em;
font-weight: normal;
text-align: center;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
.illustration {
display: block;
margin: 0 auto;
text-align: center;
}
p {
line-height: 1.6em;
}
p.quote {
text-align: center;
}
q {
quotes: "“" "”" "“" "”";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
a {
color: #6c984c;
text-decoration: none;
}
@media only screen and (max-width: 400px) {
.illustration img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1em;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
}
@media only screen and (min-width: 961px) {
.page {
width: 800px;
max-width: 800px;
margin: 0 auto;
}
}