* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 1rem;
}

p {
  font-size: 1rem;
  max-width: 100%;
}

details {
  max-width: 100%;
  
	&[open] summary::after {
		rotate: -180deg;
	}
  
  summary {
    /* Override default "display: list-item" and position the summary text as well as the custom arrow icon */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    
    /* General styling */
    background-color: #67a75b;
    cursor: pointer;
    font-weight: 500;
    margin-block-end: 0.5rem;
    padding: 0.75rem;
    
		/* Fallback code to hide standard marker, especially on Safari */
		&::marker,
		&::-webkit-details-marker {
			display: none;
		}
    
    &::after {
      /* CSS for chevron shape from https://css-shape.com/chevron/ */
      --shape-chevron-width: 1rem;
      --s: calc(var(--shape-chevron-width) / 4);

      /* Styling */
      content: "";
      aspect-ratio: 7/5;
      background: currentColor;
      clip-path: polygon(0 0, 0 var(--s), 50% 100%, 100% var(--s), 100% 0, 50% calc(100% - var(--s)));
      flex-shrink: 0;
      width: var(--shape-chevron-width);
      
      /* Animation */
			rotate: 0deg;
			transition: rotate 0.35s ease;
    }
  }
}