html {
    font-family:'source-serif-pro';
    -webkit-font-smoothing: antialiased;
}
body {
    padding:0;
    margin:0;
}
html, body {
    width:100%;
    height:100%;
}
h1, h2, h3, h4 {
    font-weight:300;
}
.content-container {
    display:flex;
    justify-content:center;
}
.content {
    width:80%;
    max-width:45em;
}
.content.narrow {
    max-width:30em;
}
header .content {
    max-width:80em;

    padding:4em 0;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
a {
    text-decoration:none;
    color:#000;
    text-decoration:underline;
    text-underline-offset: 0.25em;
    text-decoration-color: #eee;
}
a:hover {
    text-decoration-color: #000;
}
header ul {
    display:flex;
    flex-direction:row;
    gap:2em;
}
header li {
    list-style:none;
}


main .content {
    text-align:center;
}
.hero .content {
    max-width:60em;
}
.hero h1 {
    display:inline-block;
    margin:0.5em 0 0 0;
    font-size:4em;
}
.hero h1 span {
    color:#428D69;
}
.hero p {
    font-size:1.25em;
    margin:0.5em 0 0 0;
}
a.button,button {
    outline:none;
    border:none;
    background-color:transparent;
    font-family:inherit;
    display:inline-block;
    color:#277650;
    font-size:1.5em;
    text-decoration:none;
    padding:0 0.25em;
    border-bottom:0.15em solid rgba(118,178,149,0.25);
    cursor:pointer;
    transition:0.2s padding;
}
a.button {
    margin-top:2em;
}
a.button:hover,button:hover {
    border-bottom:0.15em solid rgba(118,178,149,0.35);
    padding:0 0.35em;
}
a.button span {
    vertical-align: 0.1em;
    transition:0.2s padding;
}
a.button:hover span {
    padding-left:0.15em;
}

.hero + .feature {
    margin-top:8em;
}
.hero + .main {
    margin-top:3em;
}
.feature {
    margin-top:5em;
}
.feature .content {
    display:flex;
    flex-direction:row;
    gap: 5em;
    max-width:50em;
}
.feature p {
    color:#666;
    line-height:150%;
}
.feature h2 {
    font-size:2.15em;
    line-height:125%;
}
.feature img {
    width:100%;
}
.feature .image {
    flex:3;
}
.feature .text {
    flex:2;
    text-align:right;
}
.feature.flip .text {
    order: 2;
    text-align:left;
}

.main {
    color:#333;
    line-height:150%;
}

footer {
    padding:5em 0 3em 0;
    text-align:center;
    color:#999;
}
footer p {
    margin:0;
}
footer p + p {
    margin-top:0.25em;
}

@media only screen and (max-width: 600px) {
    main .feature .content {
        flex-direction:column;
    }
    .feature .text,.feature.flip .text {
        order: 1;
        text-align: center;
    }
    main .feature .image {
        order: 2;
    }
}