body {
 margin: 0;
 font-family: Arial, sans-serif;
 transition: background-color 0.5s, color 0.5s;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
 position: relative;
 max-width: 900px;
 padding: 20px;
 background-color: #ffffff;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.profile-img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 margin-bottom: 20px;
 object-fit: cover;
 animation: slideDown 1s forwards;
}

.job-title {
 font-size: 24px;
 font-weight: bold;
 animation: slideDown 1.2s forwards;
}

.job-length {
 font-size: 20px;
 font-weight: bold;
 animation: slideDown 1.2s forwards;
}

.name {
 font-size: 20px;
 margin-top: 10px;
 animation: slideDown 1.4s forwards;
}

.description {
 font-size: 16px;
 margin-top: 20px;
 max-width: 100%;
 word-wrap: break-word;
 overflow-wrap: break-word;
 animation: slideDown 1.6s forwards;
}

.crush {
 position: absolute;
 font-size: 2px;
 margin-top: -370px;
 left: 2%;
 transform: translateX(-50%);
 max-width: 100%;
 word-wrap: break-word;
 overflow-wrap: break-word;
 /* animation: slideDown 1.6s forwards; */
}

@keyframes slideDown {
 0% {
  opacity: 0;
  transform: translateY(-50px);
 }

 100% {
  opacity: 1;
  transform: translateY(0);
 }
}

.dark-mode {
 background-color: #121212;
 color: #ffffff;
}

.dark-mode .container {
 background-color: #333333;
 color: #ffffff;
}

.dark-mode .toggle-button {
 background-color: #333;
 color: #fff;
}

.dark-mode .job-title {
 color: #ffffff;
}

.dark-mode .name {
 color: #ffffff;
}

.dark-mode .description,
.dark-mode .crush {
 color: #ffffff;
}

.light-mode {
 background-color: #ffffff;
 color: #000000;
}

.toggle-button {
 position: absolute;
 top: 20px;
 right: 20px;
 padding: 10px 20px;
 background-color: #f0f0f0;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 16px;
}

.back-button {
 position: absolute;
 top: 20px;
 left: 20px;
 padding: 10px 20px;
 background-color: #f0f0f0;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 16px;
}

.dark-mode .toggle-button {
 background-color: #333;
 color: #fff;
}

.dark-mode .back-button {
 background-color: #333;
 color: #fff;
}

.light-mode .toggle-button {
 background-color: #f0f0f0;
 color: #000;
}

@media (max-width: 1212px) {
 .container {
  max-width: 80%;
 }

 .crush {
  margin-top: -350px;
  left: 3%;
 }
}

@media (max-width: 480px) {
 .container {
  padding: 10px;
 }

 .profile-img {
  width: 100px;
  height: 100px;
 }

 .job-title {
  font-size: 20px;
 }

 .name {
  font-size: 18px;
 }

 .description {
  font-size: 14px;
 }

 .crush {
  margin-top: -360px;
  left: 5%;
 }
}