@charset "UTF-8";

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your MFC Profile</title>
<style>
/* General reset */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Body Styling */
body {
  font-family:'Roboto',sans-serif;
  background-color:#f8f8f8;
  color:#333;
  padding:0;
  margin:0;
  background-image:url(https://img.mfcimg.com/photos2/890/8900170/783-697-771-330-8097133.jpg);
  background-size:30%;
/* Adjust background to 30% of original size */
  background-position:center center;
/* Centers the image */
  background-attachment:fixed;
/* Keeps the background fixed while scrolling */
  background-repeat:no-repeat;
/* Prevents repeating */
  height:100vh;
/* Full viewport height */
}

/* Container for profile */
.profile-container {
  max-width:1100px;
  margin:50px auto;
  background:rgba(255,255,255,0.8);
/* Slight transparency */
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 0 30px rgba(0,0,0,0.3);
  padding-bottom:40px;
}

/* Profile image section */
.profile-image {
  width:200px;
  height:200px;
  border-radius:50%;
  margin-top:-80px;
  border:5px solid #fff;
  box-shadow:0 0 20px rgba(0,0,0,0.2);
  object-fit:cover;
  transition:transform .3s ease;
  display:block;
  margin:0 auto;
}

.profile-image:hover {
  transform:scale(1.1);
}

/* Header section */
.header {
  text-align:center;
  padding:20px;
  background-color:#7d3c8f;
  color:#fff;
  border-radius:10px;
}

.header h1 {
  font-size:40px;
  font-weight:bold;
}

.header p {
  font-size:18px;
  font-style:italic;
}

/* About Me Section */
.about-me {
  padding:30px;
  background-color:#f0e6f0;
  border-radius:10px;
  margin-top:20px;
}

.about-me h2 {
  font-size:30px;
  color:#7d3c8f;
  text-align:center;
  margin-bottom:15px;
}

.about-me p {
  font-size:18px;
  line-height:1.6;
  color:#555;
  text-align:center;
}

/* Social Media Links */
.social-links {
  text-align:center;
  margin-top:40px;
}

.social-links a {
  text-decoration:none;
  color:#fff;
  background-color:#0077b5;
  padding:12px 20px;
  margin:10px;
  border-radius:30px;
  font-size:18px;
  display:inline-block;
  transition:background-color .3s ease;
}

.social-links a:hover {
  background-color:#005b8e;
}

/* Call to Action Button */
.cta-button {
  display:block;
  width:250px;
  margin:40px auto;
  background-color:#9f27ad;
  color:white;
  font-size:20px;
  padding:15px;
  text-align:center;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
  box-shadow:0 0 10px rgba(0,0,0,0.2);
  transition:background-color .3s ease,transform .3s ease;
}

.cta-button:hover {
  background-color:#7d3c8f;
  transform:translateY(-5px);
}

/* Profile Stats Section */
.stats {
  display:flex;
  justify-content:space-around;
  padding:30px;
  background-color:#e1dbe3;
  border-radius:10px;
}

.stat {
  text-align:center;
}

.stat h3 {
  font-size:24px;
  color:#7d3c8f;
}

.stat p {
  font-size:18px;
  color:#555;
}

/* Add responsiveness for smaller screens */
@media (max-width: 768px) {
  .profile-container {
    margin:20px;
  }

  .stats {
    flex-direction:column;
    align-items:center;
  }

  .social-links a {
    font-size:16px;
    padding:10px 15px;
  }

  .cta-button {
    font-size:18px;
    padding:12px 18px;
  }

  .profile-image {
    width:150px;
    height:150px;
  }
}