CSS-Code
* {
    box-sizing: border-box;
}

img {
   max-width: 100%;
}

.details-wrapper {
   width: 75vw;
   margin: 0 auto;
   background-color: #E5E5E5;
   box-shadow:0 0 1px 2px #BFBFBF;
}
details {
   padding: .5rem;
   /*font: 1rem/1.2 sans-serif;*/
}

summary {
   padding: .25rem 1rem;
   /*green*/
   background-color: #eeeeee;
   /*font: bold 1.25rem/2 sans-serif;*/
   font-weight: bold;
   font: 20px;
   border: none;
   /*border-radius: 0px;*/
   /*box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);*/
   /*color:floralwhite;*/
   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: italic;
   /*content: '- ';*/ /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details[open] summary {
   font-style: italic;
   border-radius: 3px 3px 0 0;
}

.details-content {
   margin: 0;
   padding: .25rem 1rem;
   background-color: black;
   border-radius: 0 0 3px 3px;
   box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);
   color: #2eca6a;
}
.details-content p {
   font: 1.125rem/1.5 sans-serif;
}