/* Skills Section */

.skills-inner-container:hover {
  transform: translateY(30px);
  transition: ease-in-out 0.7s all;
}

.skills-inner-container:hover > .skills-inner-container-title {
  transform: translateY(70px);
  transition: ease-in-out 0.7s all;
  color: rgb(32, 162, 179);
}

.skills-inner-container-text {
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;
  display: flex;
  flex-direction: column;

  text-align: center;
  opacity: 0;

  padding: 2rem 1rem 1rem 1rem;

  transition: ease-in-out 0.7s all;

  z-index: 999;
}

.skills-inner-container-text:hover {
  transition: ease-in-out 0.7s all;
  opacity: 1;
}

.skills-inner-container-title {
  transition: ease-in-out 0.7s all;
}

/* Projects Section */

.projects-inner-container:hover > .projects-inner-container-overlay {
  animation: forwards revealProject 0.7s;
}

.projects-inner-container:hover > .projects-inner-container-overlay > p {
  animation: forwards revealText 0.7s;
  animation-delay: 0.5s;
}

.projects-inner-container-overlay {
  width: 100%;
  height: 100%;
  background-color: rgb(20, 20, 20);

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;

  z-index: 1000;
  opacity: 0;
}

@keyframes revealProject {
  0% {opacity: 0; width: 0%; left: 0;}
  100% {opacity: 1; width: 100%; left: 0;}
}

@keyframes revealText {
  0% {opacity: 0;}
  100% {opacity: 1;}
}