#topbar {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #594F4F;
    width: 100%;
    /* height: 12px; */
}

.content-topbar {
    width: 100%;
    height: 20px;
    /* margin: -24px; */
}

#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); }
#content-topbar-2 { background-color: hsla(134,52%,75%,0.9); }
#content-topbar-3 { background-color: hsla(177,43%,47%,0.9); }
#content-topbar-4 { background-color: hsla(190,21%,42%,0.9); }
#content-topbar-5 { background-color: hsla(0,6%,33%,   0.9); }
/* #E5FCC2, 5%) 0%, */
/* #9DE0AD, 5%) 20%, */
/* #45ADA8, 5%) 30%, */
/* #547980, 5%) 40%, */
/* #594F4F, 5%) 60%, */
/* #594F4F, 5%) 100%) */

.o-grad {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Allow clicks to reach underlying content */
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url(#noiseFilter);
  opacity: 0.25; /* Adjust the opacity value as needed */
  z-index: -1;
  mix-blend-mode: difference;
}

body {
  background: linear-gradient(
    180deg,
    hsla(84, 91%, 87%, 0.8) 0%,
    hsla(134, 52%, 75%, 0.8) 20%,
    hsla(177, 43%, 47%, 0.8) 30%,
    hsla(190, 21%, 42%, 0.8) 40%,
    hsla(0, 6%, 25%, 0.8) 60%,
    hsla(0, 6%, 25%, 1) 100%
  ) no-repeat;
  background-color: hsla(0, 6%, 25%, 1);
  margin: auto;
  max-width: 700px;
  line-height: 1.6;
  font-size: 18px;
  color: #4f5b66;
  padding: 10px 20px;
}

p {
    font-family: 'Playfair', serif;
    /* margin: 0px 0px -30px 0px; */
    /* padding: 0px; */
}

div.gallery {
    float: left;
    /* margin: -10px; */
    width: 200px;
}

span {
    font-family: 'Playfair', serif;
}

#content {
    background-color: hsla(84, 20%, 99%, 1);
    position: relative;
    /* padding: 24px; */
}

.outline-2 {
    padding: 24px;
}

#content-body {
    padding: 24px;
}

hr {
    color: hsla(0,6%,33%,   0.9);
}
h1 {
    color: hsla(190, 21%, 36%, 1);
    font-family: 'Playfair', serif;
    font-size: 40px;
    /* margin-top: -5px; */
}

h2 {
    color: hsla(190, 21%, 36%, 1);
    line-height: 1.2;
    font-size: 40px;
    font-family: 'Playfair', serif;
}

h3 {
    color: hsla(190, 21%, 36%, 1);
    line-height: 1.2;
    font-size: 24px;
    font-family: 'Playfair', serif;
}

a.svg-icon {
    text-decoration: none;
}

a.svg-icon:hover {
    text-decoration: none;
}

svg:hover {
    fill: #000;
}

a {
    color: #333;
    text-decoration: none;
    font-family: 'Playfair', sans-serif;
    /* margin: 0px 0px 50px 0px; */
}

a:hover {
    color: #1d3557;
    text-decoration: underline;
}

a:active {
    color: #55;
}

a:visited {
    color: #666;
}
