/* --- Default Styles (For Wide Screens/Desktop) --- */
header .top {
    /* Use Flexbox to put the H1 and links side-by-side */
    display: flex;
    justify-content: space-between; /* Space out the H1 and the links */
    align-items: center;
    width: 100%; /* Ensure it uses the available width */
}

/* --- Responsive Styles (For Small Screens/Mobile - less than 600px) --- */
@media (max-width: 600px) {
    header .top {
        /* On small screens, stack the H1 and links vertically */
        flex-direction: column; 
        text-align: center; /* Center everything */
    }

    header h1 {
        margin-bottom: 10px; /* Add space below the name */
    }

    header p {
        /* Target the specific paragraph you want to center */
        text-align: center;
    }
    
    .links {
        /* Allow the links container to wrap the icon buttons */
        display: flex;
        flex-wrap: wrap; 
        justify-content: center; /* Center the icons themselves */
    }
    
    .links a {
        /* Add some padding/margin around the icons so they don't touch */
        margin: 5px; 
    }
}