/* add wrapper, continue with font-size */
  @keyframes invisiblyGrowFontSize {
      0% {
      font-size: 0;
      opacity: 0;
      }
      100% {
      font-size: 1em;
      opacity: 0;
      }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
      100% {
          opacity: 1;
      }
  }
  .details[open] .content {
      animation-name: invisiblyGrowFontSize, fadeIn;
   animation-duration: 200ms, 200ms;
    animation-delay: 0ms, 200ms;
text-align: left;
padding-left: 20px;
line-height: 30px;
    
  }
  details summary {
        outline: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        color: rgb(167, 63, 60);
        
      }
  /* debugging colors 
  details:not([open]) { background: rgba(0,0,255,0.15); }
  details[open] { background: rgba(255,0,0,0.15);}
  details:hover { background: rgba(0,255,0,0.15); }*/
  
  
  /* debugging styles */
  details, summary { line-height: 1.25; }
  details { margin-bottom: 0.25em; line-height: 1.25; }