.container { 
    width: 100%;
    margin: 1em auto;
}

dt {
  font-weight: bold;
}
.accordion {
  margin: 1em 0;
}
.accordion dt {
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius:.5em;
  padding: .5em 1em;
  margin:0;
  margin-top: .5em;
}
.accordion dd {
  margin: 0;
  margin-bottom: .5em;
  padding: .5em 1em;
  border: 1px solid #ddd;
  border-radius:.5em;
  border-top-left-radius: 0;  
  border-top-right-radius: 0;
  border-top: none;
  display: block;
}
.accordion dt:hover,
.accordion dt:active {
  background-color: #e5e5e5;
}

/* interactivity using aria-state expanded */
.js.accordion dt { cursor: pointer;}
.js.accordion dd[aria-expanded=false] { opacity: 0; display: none; } /* hide using js */ 
.js.accordion dd[aria-expanded=true] { display: inherit; }