body {
    margin: 0;
    background: #f1f1f1; 
    color: #393C3A;
    font: normal 20px/1.4 "Helvetica Neue", Helvetica, sans-serif;
    font: 300 22px/1.4 "Brilk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

h1 {font-weight: normal; margin-bottom: 3rem; text-align: center;}
h2 {margin-block-start: 4rem; margin-block-end: .4rem;}
h3, h4 { color: #769a2e; }
h1 img {width: 340px; margin-bottom: 35px;}
h1 img.roevoo {width: 343px; padding-left: 5px;}
.banner {text-align: center; background-color: #393C3A;}
.passion {max-width: 340px; padding: 60px 0 100px;}
.quote {margin-top: 100px;}
.contact {color: #769a2e; padding: 0 4rem;}
.banner {padding-bottom: 10px;}

p, li {
    margin-block-end: .8rem;
    margin-block-start: .8rem;
}
a {color: #769a2e; text-decoration: none;}
a:hover {text-decoration: underline;}

ul, ol {padding-inline-start: 0;}

strong {font: "Brilk"; font-weight: bold;}

.page-content {
    margin: auto;
    max-width: 850px;
    padding: 4rem;
}

@media (max-width: 768px) {
    .page-content {padding: 3rem;}
    h1 img {width: 280px; margin-bottom: 30px;}
    h1 img.roevoo {width: 283px; padding-left: 4px;}
    .passion {max-width: 280px;}
}

@media (max-width: 480px) {
    .page-content {padding: 2rem;}
    h1 {margin-bottom: 2rem;}
    .mail {margin-top: 4rem;}
    h1 img {width: 240px; margin-bottom: 20px;}
    h1 img.roevoo {width: 243px; padding-left: 2px;}
    .passion {max-width: 280px;}
}