/* General Styles */
body, ul {
  margin: 0;
  padding: 20px 50px 20px;
  background-color: black; /* Set the background color to black */
  color: white; /* Set the text color to white */
  font-family: Arial, sans-serif;
}

a {
  color: turquoise; /* Set all links to turquoise */
  text-decoration: none; /* Remove underline from links */
}

a:hover {
  text-decoration: underline; /* Underline links on hover for better UX */
}

.highlight-name {
  font-weight: bold; /* Make the text bold to highlight your name */
}




/* Header Styles */
header {
  background-color: black; /* Change the header background color to black */
  color: white; /* Change the header text color to white */
  padding: 5px 5px 5px; /* top, right/left, bottom */
  display: flex;
  justify-content: flex-end;
  position: fixed; /* Make the header fixed */
  top: 0; /* Position it at the top of the viewport */
  width: 100%; /* Make it full-width */
}

.header-nav ul {
  list-style: none;
}

.header-nav li {
  display: inline;
  margin-right: 35px;
}

.header-nav a {
  color: turquoise; /* Change the navigation links to turquoise */
  font-size: 25px; /* Adjust the font size */
}







/* Front Page Styles */
.front-page .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 200px; /* Increase the space under the fixed header */
  padding: 40px;
  background-color: black; /* Set the content background color to black */
  color: white; /* Ensure text is white */
  width: 80%; /* Set the width to 80% of the page */
  margin: 0 auto; /* Center the container horizontally */
}

.front-page .content .left, .front-page .content .right {
  flex-basis: 48%; /* Equal width for both sections */
}

.front-page .content .left {
  display: flex;
  justify-content: flex-end; /* Move the image towards the right */
  align-items: center;
}

.front-page .content .right h1 {
  font-size: 50px; /* Set a large font size for H1 */
}

.front-page .content .right p:first-of-type {
  font-size: 30px; /* Set a smaller font size for p first line */
}

.front-page .content .right p:nth-of-type(2) {
  font-size: 20px; /* Set an even smaller font size for the next line */
}

.profile-pic {
  border-radius: 50%; /* Make the image circular */
  width: 350px; /* Set the width of the image */
  height: 350px; /* Set the height of the image */
  object-fit: cover; /* Ensure the image covers the entire area without distortion */
  margin-right: 50px; /* Add some space to the right */
  margin-block: 100px; /* Add some space to the front */
  display: block; /* Ensure it respects the set width and height */
  aspect-ratio: 1 / 1; /* Ensure the aspect ratio is 1:1 */
}






/* Footer Styles */
footer {
  padding: 20px;
  background-color: black;
  color: white;
  text-align: center;
}

.social-media {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.social-media li {
  display: inline-block;
  margin-right: 10px;
}







/* Subpage Styles */
.sub-page .content {
  width: 80%; /* Set the width to 80% of the page */
  margin: 0 auto; /* Center the container horizontally */
  padding: 40px;
}

.sub-page img {
  width: 80%; /* Set the desired width for all images */
  max-width: 700px; /* Set the maximum width for all images */
  height: auto; /* Maintain the aspect ratio */
}

.content.reversed {
  flex-direction: row-reverse; /* Reverse order of elements */
  justify-content: center;
}

.content.reversed .left {
  display: flex;
  justify-content: flex-end; /* Move the image towards the center */
  align-items: center;
  padding-right: 80px; /* Add padding to move the image closer to the center */
}

.content.reversed .right {
  max-width: 800px; /* Set a maximum width for the text container to make it more compact */
  padding: 50px; /* Add padding around the text */
  font-size: 20px; /* Reduce the text size */
}

.content img {
  max-width: 100%; /* Ensure images are responsive */
  height: auto;
}