:root {
  --spacing: 30px;
  --arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23E7B44D"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>');
}
body {
  background: radial-gradient(
    circle,
    rgba(209, 240, 216, 1) 0%,
    rgba(186, 213, 179, 1) 100%
  );
}
.heading {
  margin: 0 auto;
  margin-bottom: 40px;
  padding-bottom: 30px;
  text-align: center;
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 50px;
  font-variation-settings: "wdth" 100;
  color: #666;
  border-bottom: 1px solid #666;
}
.accordion {
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 600px;
  display: flex;
  gap: 15px;
  flex-direction: column;
  font-family: Arial;
  font-size: 14px;
}
details {
  width: 100%;
  border-radius: 5px;
  color: white;
  background-color: #fff9dd;
  overflow: hidden;
  user-select: none;
}
summary {
  padding: 15px var(--spacing);
  cursor: pointer;
  font-weight: 700;
  min-height: var(--spacing);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #79242b;
  gap: 15px;
}
summary:after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: var(--arrow);
  transition: transform 0.5s ease-out;
  transform: rotate(180deg);
  flex-shrink: 0;
}
details[open] {
  background-repeat: no-repeat;
  background-position: bottom 20px right 30px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%2309A603"><path d="M480-120q-117 0-198.5-81.5T200-400q0-94 55.5-168.5T401-669q-20-5-39-14.5T328-708q-33-33-42.5-78.5T281-879q47-5 92.5 4.5T452-832q23 23 33.5 52t13.5 61q13-31 31.5-58.5T572-828q11-11 28-11t28 11q11 11 11 28t-11 28q-22 22-39 48.5T564-667q88 28 142 101.5T760-400q0 117-81.5 198.5T480-120Zm0-80q83 0 141.5-58.5T680-400q0-83-58.5-141.5T480-600q-83 0-141.5 58.5T280-400q0 83 58.5 141.5T480-200Zm0-200Z"/></svg>');
  padding-bottom: 30px;
}
details[open] summary {
  border-bottom: 1px solid grey;
}
details[open] summary:after {
  transform: rotate(0deg);
}
div p {
  margin: var(--spacing);
  color: black;
  line-height: 18px;
}