#post_designing-for-color-not-just-blindness h1 {
  position: relative;
  color: #222;
  background: transparent;
  background-image: -webkit-linear-gradient(left, #162A34, #D00036, #2C7DAE);
  -webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.cbb {
  padding: 10px;
  margin: 0 2px;
  background-color: #555;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}

.cbb:active {
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5);
}

.cbb-space {
  margin: 0 6px;
}

.cbb-color.cbb-good {
  background-color: #053DB3;
}
.cbb-color.cbb-bad {
  background-color: #EB0009;
}

.cbb-shape.cbb-bad {
  border-radius: 0;
}

.cbb-pattern.cbb-bad {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent 0, transparent 5px, #C5011C 5px, #C5011C 10px);
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 5px, #C5011C 5px, #C5011C 10px);
  background-repeat: repeat;
}

.cbb-weight.cbb-good {
  font-weight: bold;
}