div.tags{
  display: table;
  border-collapse: separate;
  border-spacing: 3px 0;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: auto;
  text-align: left;
}

.tags a.tagbutton {
  padding: 1px 4px 1px 4px;
  margin: 1px 5px 1px 5px;
  font-size: 10px;
  border-radius: 8px;
  transition: .4s;
  text-decoration: none;
  background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%);
  border: solid 1px var(--gray-color);
  color: white;
  transition: .4s;
}

.tags a.tagbutton:hover {
  color:var(--gray-color);
  border: solid 1px var(--gray-color);
  background : white;
}

.tags a.red {
  background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%);
  border: solid 1px var(--red-color);
  color: white;
}

.tags a.red:hover {
  background : white;
  border: solid 1px var(--red-color);
  color:var(--red-color);
}

.tags a.blue{
  background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%);
  border: solid 1px var(--blue-color);
  color: white;
}

.tags a.blue:hover {
  background : white;
  color:var(--blue-color);
  border: solid 1px var(--blue-color);
}

.tags a.green{
  background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%);
  border: solid 1px var(--green-color);
  color: white;
}

.tags a.green:hover {
  background : white;
  color:var(--green-color);
  border: solid 1px var(--green-color);
}