#buttons {
  text-align: center;
  margin: 30px 0;
}

.react-btn {
  background-color: #61dbfb;
  color: black;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.js-btn {
  background-color: #f7df1e;
  color: black;
  padding: 10px 20px;
  border: none;
  margin: 5px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.question-btn{
   background-color: #ff16258d;
  color: rgba(255, 255, 255, 0.847);
  padding: 10px 20px;
  border: none;
  margin: 5px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.all-btn {
  background-color: transparent;
  color: #f0ffad;
  padding: 10px 20px;
  border: 1px solid #f0ffad;
  margin: 5px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.blog_main .filter-btn.active {
  outline: 2px solid #000;
}



@media screen and (max-width: 991px) {
  .blog-main .blogPage-list {
    text-align: center;
    padding: 200px 0;
  }
  .blogPage-list .card-self {
    width: 350px !important;
    text-align: start;
    height: 360px;
  }
}