@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair_normal.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair_bold.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/playfair_italic.woff') format('woff');
}

body {
  background-color: #e9ecef;
  overflow-x: hidden;
}

.site-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.bodyElement {
  background-color: #fff;
}

.textContent {
  padding: 10px;
}

/* Navigation list items */
.navItem {
  min-height: 78px;
  padding: 8px 15px;
  text-decoration: none;
  color: inherit;
}

.navItem:hover {
  background-color: #f5f5f5;
  color: inherit;
}

.headingImage {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 1px solid #000;
  flex-shrink: 0;
}

.headingText {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #645f5f;
  text-rendering: optimizeLegibility;
  padding: 10px 0;
}

/* Responsive: smaller thumbnails on narrow screens */
@media (max-width: 400px) {
  .headingImage {
    width: 75px;
    height: 75px;
  }
  .headingText {
    font-size: 14px;
  }
}

.formErrorMsg {
  color: red;
  text-align: center;
}

.paneBackground {
  background: url('../img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

.chartData {
  margin: 10px;
}

/* Side menu (Bootstrap offcanvas) */
.sideMenu {
  background-color: #1a1a2e !important;
}

.sideMenu .offcanvas-title {
  color: #fff;
}

.sideMenu .list-group-item {
  background-color: transparent;
  color: #ccc;
  border-color: #2d2d44;
}

.sideMenu .list-group-item:hover,
.sideMenu .list-group-item:focus {
  background-color: #2d2d44;
  color: #fff;
}

.scientificName {
  font-style: italic;
}

/* Creature image gallery */
.creature-slide-img {
  max-height: 400px;
  object-fit: cover;
  background-color: #000;
}