body {
  background-color: #1c1d26;
  color: #999999;
  font-family: "Oldenburg";
}

article {
  margin: 0 20px;
  padding: 5px 20px;
  text-align: justify;
  font-size: 18px;
}

h1  {
  text-align: center;
  font-size: 32px;
}

h2 {
  text-align: center;
  font-size: 28px;
}

img.pic-banner {
  width: 100%;
}

img.portrait {
  width: 100%
}

article div figure img {
  text-align: center;
  width: 100%;
  margin: 0 20px;
}

img {
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: #ffffff;
  font-style: bold;
}

.figure, figcaption {
  color: #ffffff;
  font-style: oblique;
  font-weight: bold;
  text-align: center;
}

footer {
  border-style: double;
  border: 5px solid #999999;
  border-radius: 10px;
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center;
}

footer p {
  display: flex;       /* Enable flex layout */
  align-items: center; /* Center items vertically */
  margin-left: 10px;
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
}

.footer-img {
  padding: 0.5em;
  margin-right: 2.0em;
  width: 150px;
}


.figure-number, .absent {
  display: none;
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  /*padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a, .dropdown-btn {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.dropdown-btn {
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: "Oldenburg";
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

.active {
  background-color: green;
  color: white;
}

.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

.dropdown-container ul {
  list-style-type: none;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.openbtn {
  position: fixed;
  top: 25px;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Definition menus */
dl {
  padding: 0.5em;
}

dt {
  float: left;
  text-align: right;
  font-weight: bold;
  color: white;
}

dt::after {
  content: ":";
}

dd {
  margin: 0 0 0 175px;
  padding: 0 0 0.5em 0;
}

/* Image text wrapping */
div.wrap-left-img {
  float: left;
  padding: 0.5em;
  margin-right: 2.0em;
  max-width: 45%;
  word-wrap: normal;
}

div.wrap-right-img {
  float: right;
  padding: 0.5em;
  max-width: 45%;
  word-wrap: normal;
}

div.wrap-img div.figure p {
  display: inline;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: "Oldenburg";
  font-size: 20px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #111;
}

blockquote {
  font-weight: bold;
  font-style: italic;
}