* {
   box-sizing: border-box;
}
img {
  max-width: 100%;
}
.details-wrapper {
  width: 75vw;
  margin: 0 auto;
  background-color: #2a4b41;
  box-shadow:0 -1px 1px 5px;
}
details {
  padding: .5rem;
  ;font: 1rem/1.2 sans-serif;
}
summary {
  padding: .25rem 1rem;
  background-color: #3C9931;
  font: 1rem/1 sans-serif;
  color:white;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);
  cursor: pointer;
  list-style: none; /* Triangle not shown */
}
/* Triangle not shown - Style for Webkit-Browser */
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  padding-right: .25rem;
  content: '+ ';  /* Instead of Triangle closed */
}
details[open] summary::before {
  padding-right: .25rem;
  font-style: Arial;
  content: '- '; /* Instead of Triangle open */
}
/* Styling the summary in case of open 'details' */
details[open] summary {
  font-style: italic;
  border-radius: 1px 1px 0 0;
   color: black;
    font-weight: bold;  
	background-color: #FFDA3E;
}
.details-content {
  margin: 0;
  padding: .25rem 1rem;
  background-color: floralwhite;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);
  color: steelblue;
}
.details-content p {
  font: 1.0rem/1.0 sans-serif;
}