details{font-size: 16px;padding: 15px;border: 1px solid grey;margin-bottom: 10px;border-radius: 4px;transition: all 1s ease;}
details:hover{background-color:  #e3e3e3;}
details summary {cursor: pointer;font-weight: bold;list-style: none; position: relative;padding-left: 20px;}
details summary::before {content: "▶"; position: absolute;left: 0;transition: transform 0.2s ease;}
details[open] summary::before {transform: rotate(90deg);}
.details-text{padding-left: 15px; margin-top: 8px; border-top: 1px solid #ccc; padding-top: 8px;opacity: 0;max-height: 0;transition: opacity 1s ease, max-height 1s ease;}
details[open] .details-text {opacity: 1;max-height: 500px;transition: opacity 1s ease, max-height 1s ease;}