html {
  margin: 0;
  line-height: 1.3;
  background: transparent;
  --s: 77px; /* control the size*/
  --c1: #141414;
  --c2: #000000;
  
  --_g: 
     var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
     var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
  background:
    radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
    radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
    var(--c1);
  background-size: var(--s) var(--s);
}
/* --- New Responsive Layout --- */
.content-wrapper {
    /* Use 'rem' for a better responsive unit for width */
    max-width: 900px; /* Use a max-width instead of fixed width */
    width: 90%; /* Scale up and down fluidly */
    margin: 0 auto; /* Center the wrapper on the page */
    padding-top: 50px; /* Replace the <BR><BR> */
}

.profile-section {
    display: flex; /* Activate Flexbox for the two main columns */
    align-items: flex-start; /* Align content to the top */
    gap: 30px; /* Add space between the image and text */
}

.image-area {
    /* Allocate space for the image area on desktop */
    flex: 0 0 58%; 
}

.text-area {
    /* Allow text area to take up remaining space */
    flex: 0 0 62%; 
}

/* Ensure the image is flexible and doesn't exceed its container */
.profile-pic {
    max-width: 100%; 
    height: auto; /* Maintain aspect ratio */
    display: block;
}
/* Center the main title for better mobile flow */
.p1 {
        text-align: center;
        font-family: 'Georgia', serif;
        font-weight: normal;
        color: #E5E6EF;
        font-size: 1.8rem; /* Slightly smaller for mobile */
    }
    /* Set the body text to justify better for a narrow screen */
.p2 {
        text-align: left;
        font-family: 'New Times Roman', serif;
        font-weight: normal;
        color: #DADBED;
        font-size: 1.2rem; /* Slightly smaller for mobile */
    }
/* --- Mobile Optimization: Stacking Layout Below 768px --- */
@media (max-width: 768px) {
    .profile-section {
        flex-direction: column; /* Stack the image and text vertically */
        gap: 20px;
    }

    .image-area, .text-area {
        flex: 0 0 auto; /* Allow both to take full width */
        width: 100%; 
    }
}
/* Add to your existing .icon style (which you don't have yet, so add this) */
.icon {
    margin: 2 25px; /* Increase horizontal space between icons */
    width: 45px; /* Make the icons slightly larger for an easier tap target */
    height: 45px;
}
a:link {
    color: #ECE6F4; /* Dodger Blue for links */
    text-decoration: none; /* Remove underline */
}
a:hover {
    text-decoration: underline; /* Underline on hover for better UX */
    text-shadow: #ECE6F4 0 0 5px; /* Glow effect on hover */
}
a:visited {
    color: #C8B8DA; /* Purple for visited links */
}
a:active {
    color: #DAC2BA; /* OrangeRed for active links */
}