.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.buttons {
  text-align: center;
  margin-bottom: 60px;
}
button {
  outline: none;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 6px;
  width: 80px;
  height: 24px;
  margin-right: 24px;
  cursor: pointer;
  transition: 300ms ease-in;
}
button:hover {
  transform: scale(1.1);
}
.projects {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.project {
  width: 240px;
  height: 150px;
  justify-content: space-evenly;
  margin: 20px;
  transition: all 300ms ease-out;
}
.project.anim-out {
  opacity: 0;
  transform: scale(0.95) translateY(40px);
}
.project.invisible {
  display: none;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const buttons = document.querySelector('.buttons');
const projects = document.querySelectorAll('.project');
buttons.addEventListener('click', (e)=>{
  const filter = e.target.dataset.filter;
  //console.log(filter);
  if(filter == null){
    return;
  }
  else {
    projects.forEach(project=>{
      project.classList.add("anim-out");
      setTimeout(()=>{
        if(project.dataset.pic == filter) {
        project.classList.remove('invisible');
      }
      else {
        project.classList.add('invisible');        
      }
       project.classList.remove("anim-out");     
      },300);
    });
  }
})