.button {
  display: flex;
  margin: auto 2px;
  padding: 2px;
  width: 30px;
  height: 30px;
  background: white;
}
.button p {
  margin: auto;
  font-size: 32px;
  line-height: 0;
}
.button:hover {
  background: blue;
}
.button:hover p {
  color: white;
}

.canonItem {
  padding: 4px 2px;
  margin: 4px auto;
  max-width: 996px;
  background: #ddd;
  /*background: #f9d770;*/
}
.canonItem div{
  display: flex;
}
.canonItem h1{
  margin: auto 6px;
  font-size: 18px;
}

.canonText {
  margin: 8px;
}

.category {
  margin: 16px auto 0;
  max-width: 1000px;
  font-style: italic;
}

.tag {
  margin: auto 2px;
  padding: 2px;
  background: white;
}
.tag p {
  margin: auto;
  color: blue;
}
.tag:hover{
  background: blue;
  color: white !important;
}

.tagDescription {
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin: 4px auto;
  max-width: 976px;
  background: #ddd;
}
.tagDescription a {
  margin: 8px 0;
  padding: 2px;
  background: white;
}
.tagDescription a:hover {
  background: blue;
  color: white !important;
}

.tags {
  margin: 16px auto;
  max-width: 796px;
}
.tags .button p {
  margin: 13px auto;
}




/*.mix .button {*/
/*  background: #f9a370;*/
/*}*/
/*.mix .button:hover p {*/
/*  color: #f9a370 !important;*/
/*}*/

/*.neg .button {*/
/*  background: #f97070;*/
/*}*/
/*.mix .button:hover p {*/
/*  color: #f97070 !important;*/
/*}*/



.tagList {
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.tagList a {
  margin: 2px;
  padding: 2px;
  background: white;
  color: blue;
}
.tagList a:hover{
  background: blue;
  color: white !important;
}



.canonHide {
  background: blue;
}
.canonHide p {
  color: white;
}
.canonHide:hover {
  background: white;
}
.canonHide:hover p {
  color: blue;
}

.hidden .canonHide {
  display: none;
}
.hidden .canonText {
  display: none;
}
.hidden .tagList {
  display: none;
}

.shown .canonShow {
  display: none;
}
.shown .canonText {
  display: block;
}
.shown .tagList {
  display: flex;
}