.lead {
  font-size: 1.32rem;
}

.secondary {
  font-size: 1.0666666667rem;
}

.third {
  font-size: 0.9561752988rem;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

@media only screen and (min-width: 700px) {
  .container {
    padding: 10px;
  }
}
@media only screen and (min-width: 900px) {
  .container {
    padding: 10px 0;
  }
}
.filter-buttons {
  display: flex;
  margin-bottom: 5px;
  text-align: center;
}

.filter-btn {
  padding: 6px 10px;
  font-size: 0.8692502716rem;
  font-weight: 400;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #999;
  color: white;
}

.filter-btn.active {
  background-color: #E71F3F;
}

.filter-btn[data-filter=utilities].active {
  background-color: #7c3aed;
}

.filter-btn[data-filter=code].active {
  background-color: #059669;
}

.utilities {
  font-weight: 400;
  background-color: #7c3aed;
}

.code {
  font-weight: 400;
  background-color: #059669;
}

.index-content a {
  background-color: transparent;
  font-weight: 300;
}
.index-content a:hover {
  color: #E71F3F;
}

.index-content a.utilities {
  color: #7c3aed;
}

.index-content a.code {
  color: #059669;
}