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 {
  color: #30353b;
  border-radius: 5px;
}

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);
  margin-bottom: 25px;
}