<h1>Background and text transition effects</h1>

<details>
<summary>Click me</summary>
<article>
<pre><code>details {
  transition: 0.2s background linear;
}
  
details:hover {
  background: #dad3b1;
}

details > summary {
  transition: color 1s;
}

details[open] > summary {
  color: #d9103e;
}</code></pre>
</article>
</details>

details {
  transition: 0.2s background linear;
}

details:hover {
  background: #dad3b1;
}

details > summary {transition: color 1s;}
details[open] > summary {color: #d9103e;}

summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  font-weight: bold;
}

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #15171b;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

details[open] > summary {border-bottom: 2px solid #fff9f1;}

details[open] > summary::after {
  transform: rotate(-180deg);
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  border-radius: 5px;
  color: #30353b;
}

details[open] summary {border-radius: 5px 5px 0 0;}

details {
  background: #eeebdc;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* extra styles */

* {box-sizing: border-box;}
body {font-family: system-ui, sans-serif; margin: 20px; background: #fff9f1;}
h1 {font-size: 1.2em;}
article > *:first-child {margin: 0;}
article > * + * {margin: 0.75em 0 0 0;}
pre {color: white; background: #4c5568; padding: 1em; border-radius: 5px;}
article {padding: 15px; margin: 0;}
details code {font-size: 1.1em;}

/* 
View more examples of how to style the HTML details element on SitePoint:

https://www.sitepoint.com/style-html-details-element/
*/