.intro-section {
  margin-top: 150px;
  margin-bottom: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  max-width: 550px;
  margin-right: 80px;
}

.profile-picture {
  width: 300px;
  border-radius: 150px;
  box-shadow: -10px -10px 100px rgb(43, 255, 204);
}

.resume-button {
  padding: 15px 50px;
  font-size: medium;
  font-weight: bold;
  font-size: 19px;
  background-color: black;
  color: white;
  border-style: solid;
  border-radius: 17px;
  cursor: pointer;
  box-shadow: 2px 2px 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resume-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(130, 125, 125, 0.856);
}

.hi-message,
.name {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 12px;
}

.position {
  margin-bottom: 12px;
  font-size: 25px;
  font-weight: bold;
}
.changing-position-name {
  color: rgb(0, 255, 213);
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: rgb(0, 255, 213);
  }
}

.intro-par {
  margin-bottom: 40px;
  line-height: 25px;
  font-size: 20px;
  color: rgb(198, 180, 180);
}

.skills-container {
  display: flex;
  justify-content: center;
}

@media (max-width: 600px) {
  .intro-section {
    display: flex;
    flex-direction: column;
    gap: 80px;
  }
  .info {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
  }

  .hi-message,
  .name {
    font-size: 25px;
    text-align: center;
  }

  .position {
    font-size: 22px;
  }

  .profile-image-container {
    order: 1;
  }
}