Need help stylizing accordions

[Kvist]

Hi,

I'm new to building a knowledge base in ServiceNow and am currently creating a template for use in our articles.

I want to implement accordions, and have done so successfully. However, the styling I have inserted for them does not apply when I insert my code into an article. When viewing in other html editors, it works fine.

My code is as below:

CSS:

summary {
background-color: #777;
color: white;
cursor: pointer;
width: calc(100% - 30px); /* Adjusted width to accommodate the arrow */
border: none;
outline: none;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
margin-bottom: 20px;
border-radius: 10px;
}

.summary-1 {
background-color: #59595c;
}

h2 {
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
padding: 10px 10px;

}

HTML:

<details open>
<summary class="summary-1"><h2>Intro</h2></summary>
<p>Lorem ipsum</p>
</details>

I have attached screenshots of how it looks and how it *should* look.

I would appreciate any help.

[vishalvr]

Thank You @Kvist !