.left-text {
  z-index: 10;
}

.name {
  font-family: "Kalnia", sans-serif;
  font-size: 120px;
  z-index: 10;
  position: absolute;
  top: 7%;
  left: 2.5%;
  text-shadow: 0 0 5px white;
}

.titles {
  margin-top: 11%;
}

.title {
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  font-size: 50px;
  margin-left: 3%;
  transition: margin-left 1s ease;
  width: 50%;
}

.title:hover {
  margin-left: 6%; /* Move the title a few percent to the right on hover */
}

.title:not(:hover) {
  margin-left: 3%;
}

.content-container {
  position: relative;
}

.image-container {
  position: absolute; /* Position this container relative to the content-container */
  top: 20px; /* Adjust positioning from the top */
  right: 0; /* Adjust positioning from the right */
  z-index: 1;
  width: 50%;
  height: auto;
}

.profile-image {
  max-width: 100%;
  height: auto;
  border-top: 3px solid black;
  width: auto;
}

@media (max-width: 1490px) {
  .name {
    font-size: 105px;
  }
  .titles {
    margin-top: 12%;
  }
  .title {
    font-size: 40px;
  }
}

@media (max-width: 1200px) {
  .name {
    font-size: 95px;
  }
  .title {
    font-size: 30px;
  }
}

/* tablets */
@media (max-width: 1050px) {
  .name {
    font-size: 80px;
  }
}

@media (max-width: 900px) {
  .image-container {
    padding-top: 40%;
    height: 100%;
    width: auto;
  }
  .name {
    font-size: 55px;
    margin-top: 4%;
    margin-bottom: 1%;
  }
  .titles {
    margin-top: 21%;
  }
  .title {
    font-size: 21px;
    width: 100%;
    margin-bottom: 1%;
  }
  .content-container {
    margin-top: 10.5%;
  }
  footer {
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
  }

  body {
    max-height: 95vh;
  }

  .profile-image {
    border-top: 0px solid black;
  }
}

@media (max-width: 600px) {
  .name {
    font-size: 33px;
  }
}