@font-face {
  font-family: 'Lucy Rose PERSONAL';
  src: url('font/LucyRose.otf');
}
.lr { font-family: 'Lucy Rose PERSONAL'; }

@font-face {
  font-family: 'Halcom Book';
  src: url('font/Halcom-Book.otf');
}
*, .hb { font-family: 'Halcom Book'; }

@font-face {
  font-family: 'Gautreaux Bold';
  src: url('font/Gautreaux-Bold.otf');
}
.gb { font-family: 'Gautreaux Bold'; }

:root {
  --bloom: #fff1b1;
  --shade: #568366;
  --gleam: #ffcf55;
  --mist:  #92c2a5;
  --selected: #92c2a5;
  --lime:  #dbf68f;
  --ivory: #f2f6eb;
}

html {
  background-color: var(--ivory);
}

body {
  max-width: 650px;
  margin: auto;
  padding: 0 1em;
}

h1, h2, h3, h4, h5 {
  font-family: 'Gautreaux Bold';
  margin-bottom: 0.5em;
}

p {
  font-family: 'Halcom Book';
  /* margin: 0 1em; */
}

.right-image .img {
  float: right;
}

.left-image .img {
  float: left;
}

.img {
  width: 200px;
  overflow: hidden;
  margin-top: 10px;
}
.img img {
  width: 100%;
}

.right-image, .left-image {
  display: inline;
}

@media (width >= 685px) {
  .right-image p {
    margin-right: 225px;
    text-align: justify;
  }

  .left-image p {
    margin-left: 225px;
    text-align: justify;
  }
}

#header {
  margin-bottom: 3rem;
}

#logo {
  width: 200px;
  height: 300px;
  display: block;
  filter: brightness(0);
  fill: var(--shade);
}

#header a {
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  font-family: 'Lucy Rose PERSONAL';
  font-weight: 500;
  font-size: 130%;
}

a { color: var(--shade); }
a:visited { color: var(--shade); }
a:hover { color: var(--mist); }

#footer {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
  position: relative;
  color: var(--shade);
  font-family: 'Lucy Rose PERSONAL';
}