.app {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px 0px;
  /* width: 60%; */
}

.project {
  transition: 1s;
  color: aliceblue;
  width: 300px;
  height: 450px;
  margin: 20px 10px;
  margin-bottom: 0px;
  cursor: pointer;
  border: 1px solid rgb(8, 8, 8);
  background-color: rgb(24, 24, 24);
  overflow: hidden;
}

.project:hover {
  border: 1px solid rgb(118, 250, 147);
  box-shadow: 0px 0px 12px 6px rgba(55, 255, 88, 0.5);
}

.img-wrapper {
  width: 300px;
  height: 300px;
  border-top: 2px solid rgb(30, 30, 30);
  border-bottom: 2px solid rgb(30, 30, 30);
}

.img-wrapper:hover {
  border-top: 2px solid rgb(255, 253, 126);
  border-bottom: 2px solid rgb(255, 253, 126);
  transform: scale(1.005);
}

.project-img {
  transition: 300ms;
  border-radius: 20px;
  margin: 5%;
  width: 90%;
  height: 90%;
  background-color: rgb(10, 10, 10);
}

.project-img:hover {
  border-radius: 0px;
  margin: 0%;
  width: 100%;
  height: 100%;
}

.project-name {
  height: 40px;
  background-color: rgb(24, 24, 24);
  padding: 5px 10px;
  font-size: 20px;
  overflow: hidden;
  /* font-weight: 600; */
}

.project-desc {
  background-color: rgb(24, 24, 24);
  padding: 5px 10px;
  height: 100px;
  overflow: scroll;
}