.Main,
.Intro {
  background-color: #273253 !important;
}

.Main-content {
  padding: 1% 5% 5% 5%;
  text-rendering: optimizeLegibility;
  margin: 15px;
  border: 1px solid #faeeca;
}

.Main {
  box-shadow:
    0 0 0 5px #273253,
    0 0 0 10px #f2aa84,
    0 0 0 25px #273253;
  outline: 2px solid #f2aa84;
  margin: 25px;
  padding: 0.1% 0.75%;
}

.Intro h1,
.Main h1 {
  color: #faeeca;
  font-family: "p22-underground", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.Main h1:after,
.Intro h1:after {
  display: inline-block;
  content: "";
  background: url(https://paleontological.github.io/online-exhibits/blaschka-glass-invertebrates/curl.svg) bottom left no-repeat;
  background-size: contain;
  width: 2em;
  height: 1em;
  filter: invert(100%) sepia(20%) saturate(2878%) hue-rotate(346deg) brightness(110%) contrast(97%);
  margin-left: 0.25em;
}

.Main {
  background: url(https://paleontological.github.io/online-exhibits/blaschka-glass-invertebrates/bl.png) bottom left no-repeat,
      url(https://paleontological.github.io/online-exhibits/blaschka-glass-invertebrates/tl.png) top left no-repeat,
      url(https://paleontological.github.io/online-exhibits/blaschka-glass-invertebrates/br.png) bottom right no-repeat,
      url(https://paleontological.github.io/online-exhibits/blaschka-glass-invertebrates/tr.png) top right no-repeat;
  background-size: 15%;
}

.Main h2 {
  color: #faeeca;
  font-family: "p22-underground", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.Main h3,
.summary-title {
  color: #faeeca;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.Main .sqs-html-content p {
  font-family: "p22-underground", sans-serif;
  font-style: normal;
  color: black;
  background: #faeeca;
  padding: 20px;
  outline: 1px solid black;
  outline-offset: -10px;
}

.summary-item {
  background: #faeeca;
  padding: 20px;

}

.summary-title {
  color: #273253;
}

.image-block-outer-wrapper,
.sqs-block-video-placeholder,
.sqs-block-embed,
.sqs-block-gallery {
  background: #faeeca;
  padding: 20px;
  outline: 1px solid #273253;
}

.image-caption p,
.video-caption p {
  color: black;
  font-family: "p22-underground", sans-serif;
  font-weight: 300;
  font-style: normal;
}

div.image-button-inner a,
a.sqs-block-button-element--small,
a.sqs-block-button-element--medium,
a.sqs-block-button-element--large {
  color: #273253 !important;
  font-family: "p22-underground", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: none !important;
  background: #faeeca !important;
  border-color: #f2aa84 !important;
}

div.image-button-inner a:hover,
a.sqs-block-button-element--small:hover,
a.sqs-block-button-element--medium:hover,
a.sqs-block-button-element--large:hover {
  background: #f2aa84 !important;
  border-color: #faeeca !important;
}

.Main hr {
  background: #faeeca;
}

#sub-nav {
  width: 100%;
  border-bottom: 1px dashed #f2aa84;
  letter-spacing: .1em;
  font-weight: 400;
  font-family: "p22-underground", sans-serif;
  line-height: 1em;
}

#sub-nav ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  text-align: center;
}

#sub-nav li {
  display: inline-block;
  padding: 2vw 0.5vw;
  color: #faeeca;
  font-family: "p22-underground", sans-serif;
  font-weight: 500;
  font-style: normal;
  vertical-align: middle;
  transition: background 1s, color 1s;
}

#sub-nav li:hover,
.active li {
  background: #faeeca;
  color: #273253 !important;
}

@media screen and (max-width: 930px) {
  #sub-nav li {
    padding: 15px;
  }

  .Main {
    background-size: 15%;
    background-position: bottom 1em left 0.25em, top 1em left 0.25em, bottom 1em right 0.25em, top 1em right 0.25em;
  }
}