
<style>
  
details {
  border: 1px solid rgba(112,112,112,0.1);
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  margin-bottom:10px;
}

summary {
  margin: 1em 0em 0em 0;
  padding: 0.5em;
  list-style-type:"+";
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* background-color: #e7e7e7; */
  font-size: 22px;
    color: #333;
    transition: background-color .2s linear;
}



summary::marker{
  color: #0000ff;
  font-size: 1.2em;
  margin-right:20px;
}

details:hover{
   /* background-color:rgba(173,216,230,0.5); */
  transition: background-color .2s linear;
}

details summary::after{
  content:"+";
  float:right;
  font-size:1.2em;
  color:#000;
}

details[open] summary::after{
  content:"-";
  float:right;
  font-size:1.5em;
  color:#000;
}



</style>

