/* the container */
.details {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 15px;
}

/* summary */
.details>summary {
    background: hsl(270, 50%, 60%);
    color: hsl(270, 50%, 99%);
    padding: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* summary */
.details span.summary-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    color: hsl(270, 50%, 99%);
    text-overflow: ellipsis;
    font-size: 1.2rem;
}

/* remove default marker */
.details>summary::-webkit-details-marker {
    display: none;
}

/* details area */
.details>div {
    background: hsl(270, 50%, 95%);
    padding: 18px 15px 10px 20px;
    color: hsl(270, 50%, 0%);
}

/* Chevron closed */
.details .chevron {
    border: solid hsl(270, 50%, 99%);
    border-width: 0 2px 2px 0;
    padding: 5px;
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
    flex-shrink: 0;
    margin-right: 5px;
}

/* Chevron open */
.details[open] .chevron {
    transform: rotate(45deg);
}