/* Ensures the current page link is active and
   prevents redundant navigation */
header nav ul li .home {
  color: var(--main-color);
  pointer-events: none;
}
header nav ul li .home::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--main-color);
  width: 100%;
  transition: var(--main-transiton);
}
/* start landing */
.landing {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  padding: var(--section-padding) 0;
}
.description {
  display: flex;
  flex-direction: column;
}
.job-title {
  opacity: 0;
  transform: translateY(3px);
  transition: var(--animation-transition);
  color: var(--text-color);
}
.job-el::after {
  content: "|";
  animation: blink 1.3s infinite;
}
.name {
  opacity: 0;
  transform: translateY(15px);
  margin: 20px 0;
  color: var(--heading-color);
  font-size: 32px;
  transition: var(--animation-transition);
}
.name span:last-child {
  color: var(--main-color);
}
.overview {
  opacity: 0;
  transform: translateY(15px);
  max-width: 500px;
  line-height: 2;
  color: var(--text-color);
  font-size: 15px;
  transition: var(--animation-transition);
  margin-bottom: 20px;
}
.resume {
  background-color: var(--main-color);
  color: var(--background-color);
  border-radius: 25px;
  padding: 15px;
  cursor: pointer;
  transition: var(--main-transiton);
  position: relative;
  border: none;
  font-size: 15px;
  opacity: 0;
  transform: scale(0.8);
}
.soon {
  position: absolute;
  right: -50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ff0000;
  font-size: 17px;
  pointer-events: none;
  transition: 2s;
  display: none;
  font-weight: initial;
}
.show-soon-el {
  display: block;
}
.hide-soon-el {
  opacity: 0;
}
.resume:hover {
  background-color: var(--hover-color);
}
.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-links {
  font-size: 1.5rem;
  display: flex;
  gap: 1rem;
}
.linkedin,
.github {
  background-color: var(--main-color);
  color: var(--background-color);
  border-radius: 50%;
  padding: 5px;
  transition: var(--main-transiton);
  opacity: 0;
  transform: scale(0.8);
}
.linkedin:hover,
.github:hover {
  background-color: var(--hover-color);
}
.image {
  opacity: 0;
  transition: var(--animation-transition);
  min-width: 320px;
  height: 320px;
  position: relative;
  border-radius: 50%;
  display: flex;
  place-content: center;
  cursor: pointer;
  transform: scale(.8);
}
.image-animation {
  position: absolute;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  top: -2.5px;
  left: -2.5px;
  border-radius: inherit;
  z-index: -1;
  animation: rotate 15s linear infinite;
}
img {
  width: 100%;
  border-radius: inherit;
  border: 5px solid var(--background-color);
  transition: 0.4s ease;
}
@media (max-width: 992px) {
  .landing {
    flex-wrap: wrap-reverse;
  }
  .description {
    flex-grow: 1;
  }
  .name {
    font-size: 26px;
  }
  .overview {
    width: 100%;
    font-size: 14px;
  }
  .image {
    min-width: 270px;
    height: 270px;
    margin: 0 auto;
  }
}
/* end landing */

/* start animations  */
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* end animations  */