h1{text-align: center;}
h2{text-align: center;}

.indent{margin-left: 2.5em;}

main .grid-container {
  -webkit-column-count: auto;
  -moz-column-count: auto;
  column-count: number;
  -webkit-column-gap: 0em;
  -moz-column-gap: 0em;
  column-gap: 0em;
  column-width: 400px;
  font-size: 0.85em;
  line-height: 1.5em;

}

main article.grid-item {
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
  display:table;                      /* Actually FF 20+ */
  border-style: solid;
  border-width: 1px;
  padding: 20px;
  margin: 0 3% 6% 3%
}

a.tag {
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
  display:inline-block;
  border-style: solid;
  border-width: 1px;
  padding: 5px;
  margin: 1%;
  font-variant: all-small-caps;
  font-weight: bold;
  border-color: #674EA7;
}

a.tag:hover {
   border-color: #DABFFF;
}


.collapsible {
  background-color: #674EA7;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  /*font-size: 15px;*/
}

.active, .collapsible:hover {
  background-color: #DABFFF;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f9f9f9;
}

h1{color: #351C76;}
h2{color: #674EA7;}
h3{color: #907ad6;}
h4{color: #B5A7D6;}