.project {
  padding: 120px 0;
  /* border-bottom: 1px #ebebeb solid; */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;
  width: 30%;
  margin: 0 auto;
}

.project.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.project img {
  width: 180px;
  height: 180px;
}

.project p {
  max-width: 300px;
  margin: 0 auto;
}

#project01 h2{
  color: pink;
}

#project02 h2{
  color: green;
}

#project03 h2{
  color: purple;
}


@media screen and (max-width: 1681px) and (max-width: 1920px) {
  .project {
    width: 40%;
  }
}

@media screen and (max-width: 1441px) and (max-width: 1680px) {
  .project {
    width: 50%;
  }
}

@media screen and (max-width: 1281px) and (max-width: 1440px) {
  .project {
    width: 50%;
  }
}

@media screen and (max-width: 769px) and (max-width: 1280px) {
  .project {
    width: 70%;
  }
}

@media screen and (max-width: 375px) and (max-width: 768px) {
  .project {
    width: 90%;
  }  
}