Sorry for the late response I kind forgot I had a Revo 😭.

I created the CSS using ChatGPT, feel free to use it without giving credit.

<style>
/* MAIN ACCORDION WRAPPER */
.my-acc {
max-width: 600px;
margin: 16px auto 0;
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* EACH BOX BORDER + ROUNDED CORNERS /
.my-acc details {
margin-bottom: 8px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2); / Border color */
}

/* BOX HEADER STYLE /
.my-acc summary {
list-style: none;
cursor: pointer;
background: #f7d1e2; / HEADER background color /
color: #000; / HEADER text color */
padding: 10px 14px;
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}

/* hide default dropdown symbol (Safari/Chrome fix) */
.my-acc summary::-webkit-details-marker {
display: none;
}

/* PLUS / MINUS ICON */
.my-acc summary::after {
content: "+";
font-weight: 700;
}
.my-acc details[open] summary::after {
content: "−";
}

/* CONTENT BOX STYLE /
.my-acc-content {
background: #1c1c1c; / CONTENT background color /
color: #f5f5f5; / CONTENT text color */
padding: 12px 14px;
font-size: 14px;
}
</style>

<div class="my-acc">

<details>
<summary><strong>Box Headline</strong></summary>
<div class="my-acc-content">
<p><strong>Title inside box</strong></p>
<p>Example description text goes here. Replace this with your own text.</p>
</div>
</details>

<details>
<summary><strong>Another Box Headline</strong></summary>
<div class="my-acc-content">
<p><strong>Another title</strong></p>
<p>Write whatever text you want inside here.</p>
</div>
</details>

</div>