*,
::before,
::after {
  box-sizing: border-box; }

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
legend,
ol,
li {
  margin: 0;
  padding: 0; }

body {
  text-rendering: optimizeSpeed; }

img,
picture {
  display: block;
  max-width: 100%; }

input,
button,
textarea,
select {
  font: inherit; }

button {
  appearance: none; }

body {
  font-family: 'Lexend', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5; }

*:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 1px; }

.logo {
  width: 15rem;
  height: auto; }

h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
  font-weight: 400; }

h1 {
  font-size: 2.25rem; }

h2 {
  font-size: 2rem; }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 1.25rem; }

.eyebrow {
  font-size: 1.125rem; }

.light {
  color: #444444; }
  .light *:focus {
    outline-color: #117671; }
  .light h1,
  .light h2,
  .light h3,
  .light h4 {
    color: #4C3832; }
  .light a {
    color: #117671; }
    .light a:hover {
      color: #0d5b57; }
    .light a:active, .light a:visted {
      color: #0f6964; }

.dark {
  color: #F0E8E4; }
  .dark *:focus {
    outline-color: #17a39c; }
  .dark h1,
  .dark h2,
  .dark h3,
  .dark h4 {
    color: #fff; }
  .dark a {
    color: #fff; }
    .dark a:hover {
      color: #F0E8E4; }
    .dark a:active, .dark a:visted {
      color: #F0E8E4; }

ol,
ul,
p {
  margin-bottom: 1rem; }
  ol:last-of-type,
  ul:last-of-type,
  p:last-of-type {
    margin-bottom: 0; }

li {
  margin-bottom: 1.5rem; }
  li:last-of-type {
    margin-bottom: 0; }

b,
strong {
  font-weight: 600; }

.inner-wrapper {
  margin: 0 auto;
  max-width: 80rem; }
  @media screen and (max-width: 479px) {
    .inner-wrapper {
      padding: 1.5rem 1rem; } }
  @media screen and (min-width: 480px) {
    .inner-wrapper {
      padding: 3em 1.5rem; } }

header .inner-wrapper {
  padding: 1.5rem; }

.flex {
  display: flex; }

footer {
  background: #4C3832; }
  footer h2 {
    font-size: 1.25rem;
    font-weight: 600; }

.home {
  background: #F0E8E4;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }
  .home main {
    text-align: center; }

main {
  flex-grow: 1; }

@media screen and (max-width: 479px) {
  .logo {
    max-width: 12rem; } }

@media screen and (min-width: 480px) {
  footer .flex {
    justify-content: end; } }