body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* This allows the whole page to scroll naturally */
    overflow-y: auto; 
}

nav {
    padding: 10px;
    font-size: 15px;
}

hr {
    width: 50%;
    margin-left: 0;
    border: 1px solid black;
}

.top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    
}


.main-title {
    color: darkblue;
    margin: 10px auto;
    flex: 1;  
    text-align: center;
    /*font-size: 100px;  Reduced slightly to fit better */
    font-family: fantasy;
    font-size: clamp(5rem, 13vw, 13rem);    
    white-space: pre-line;  
}


.hero-image {
       max-width: 50%;          /* Ensures image fills its half */
        height: auto;          /* Maintains aspect ratio */
        display: block;
}

.main-title, .hero-image{
  flex: 1;               /* Forces both items to grow equally (50/50) */
  min-width: 0; 
}


.main-content {
    text-align: center;  /* This centers all the text */
    font-family: rockwell;
    max-width: 700px;          /* Optional: makes the text block easier to read */
    margin: 0 auto;      /* Centers the entire block on the page */
    clear: both;         /* This ensures the text stays BELOW the image */
}

.main-content hr {
    width: 50%;          /* Makes the line half-width as you wanted before */
    margin: 10px auto;   /* Centers the line itself */
}

h2 {
    color: #d4af37;
    font-size: 30px;               /* Larger size for section titles */
    margin-top: 30px;              /* Adds space above the heading */
    margin-bottom: 15px;           /* Space between heading and paragraph */
    font-weight: bold;
}

p {
    margin-bottom: 20px;           /* Creates the clear gap between paragraphs */
}

strong {
    font-weight: 700;              /* Makes specific words stand out */
}

h3 {
    color: black;
    font-size: 50px;
    font-weight: bold;
}

#social-media {
    text-align: center;
    padding: 40px;
    background-color:#E7CD78; /* Light grey background */
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    text-decoration: none;
    color: #0077b5; /* Official LinkedIn Blue */
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid #0077b5;
    border-radius: 5px;
    transition: 0.3s;
}

.social-link:hover {
    background-color: #0077b5;
    color: white;
}