.project-outer-div {
  /* width: 35rem; */
  width: 90%;

}

.project-div {
  /* width: 35rem; */
  background: var(--clr-accent-100);
  border-radius: 9px;
  box-shadow: rgba(78, 186, 191, 0.4) 5px 5px, rgba(78, 186, 191, 0.3) 10px 10px, rgba(78, 186, 191, 0.2) 15px 15px, rgba(78, 186, 191, 0.1) 20px 20px, rgba(78, 186, 191, 0.05) 25px 25px;
}

/* background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); */

.project-heading {
  color: var(--clr-accent-700);
  /* font-weight: var(--fw-semi-bold); */
  opacity: 1.5;
  font-size: var(--fs-300);
}

.project-img {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  max-width: 100%;
  border-radius: 7px;
  /* border: 2px solid var(--clr-accent-700); */
}

.project-figure {
  overflow: hidden;
  border-radius: 7px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.project-figure:hover {
  box-shadow: rgba(78, 186, 191, 0.35) 0px 5px 15px;
}

.project-img:hover {
  border-radius: 7px;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  box-shadow: rgba(78, 186, 191, 0.35) 0px 5px 15px;
}

.project-info {
  color: var(--clr-info);
  opacity: 0.6;
  font-size: var(--fs-150);
  text-align: justify;
}

.iconify-redirect-icon {
  color: var(--clr-heading);
}

.iconify-redirect-icon:hover {
  color: var(--clr-accent-700);
}

.built-with-icons {
  width: 16px;
  height: 16px;
}

.built-with-badge {
  font-weight: var(--fw-bold);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  margin: 4px 2px;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 1.2);
}

.date-badge {
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 1.2);
  font-weight: var(--fw-semi-bold);
  background-color: rgba(78, 186, 191, 0.9);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  border-radius: 7px;
  padding: 7px;
  white-space: nowrap;
  height: 28px;
}

.date-badge:hover {
  background-color: rgba(78, 186, 191, 0.8);
}

.html-badge {
  background-color: rgba(231, 80, 40, 0.8);
}

.html-badge:hover {
  background-color: rgba(231, 80, 40, 1);
}

.css-badge {
  background-color: rgba(42, 147, 201, 0.8);
}

.css-badge:hover {
  background-color: rgba(42, 147, 201, 1);
}

.bootstrap-badge {
  background-color: rgba(121, 82, 179, 0.8);
}

.bootstrap-badge:hover {
  background-color: rgba(121, 82, 179, 1);
}

.javascript-badge {
  background-color: rgba(245, 208, 50, 0.8);
}

.javascript-badge:hover {
  background-color: rgba(245, 208, 50, 1);
}

.jquery-badge {
  background-color: rgba(88, 151, 189, 0.8);
}

.jquery-badge:hover {
  background-color: rgba(88, 151, 189, 1);
}

.nodejs-badge {
  background-color: rgba(135, 201, 41, 0.8);
}

.nodejs-badge:hover {
  background-color: rgba(135, 201, 41, 1);
}

.express-badge {
  background-color: rgba(33, 37, 41, 0.8);
}

.express-badge:hover {
  background-color: rgba(33, 37, 41, 1);
}

.hbs-badge {
  background-color: rgba(240, 119, 43, 0.8);
}

.hbs-badge:hover {
  background-color: rgba(240, 119, 43, 1);
}

.django-badge {
  background-color: rgba(12, 75, 51, 0.8);
}

.django-badge:hover {
  background-color: rgba(12, 75, 51, 1);
}

.python-badge {
  background-color: rgba(63, 120, 168, 0.8);
}

.python-badge:hover {
  background-color: rgba(63, 120, 168, 1);
}

.jinja-badge {
  background-color: rgba(231, 80, 40, 0.8);
}

.jinja-badge:hover {
  background-color: rgba(231, 80, 40, 1);
}

.chartjs-badge {
  background-color: rgba(246, 113, 116, 0.8);
}

.chartjs-badge:hover {
  background-color: rgba(246, 113, 116, 1);
}

.sqlite-badge {
  background-color: rgba(11, 125, 203, 0.8);
}

.sqlite-badge:hover {
  background-color: rgba(11, 125, 203, 1);
}

/* media query */
@media (max-width: 1200px) {}

@media (max-width: 993px) {
  .project-outer-div {
    width: 65%;
  }
}

@media (max-width: 945px) {}

@media (max-width: 780px) {
  .project-outer-div {
    width: 85%;
  }
}

@media (max-width: 550px) {
  .project-outer-div {
    width: 85%;
  }
}

@media (max-height: 820px) {
  .project-outer-div {
    width: 85%;
  }
}