/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            background-color: #007bff;
            color: #fff;
            text-align: center;
            padding: 40px; /* Increased padding for more spacing */
        }

        header h1 {
            font-size: 2.5em; /* Increased font size for your name */
            margin-bottom: 10px; /* Added space below the name */
        }

        header p {
            font-size: 1.2em; /* Increased font size for the role */
        }

        nav {
            text-align: center;
            padding: 10px;
        }

        nav a {
            text-decoration: none;
            color: #333;
            padding: 10px;
            margin: 0 10px;
            border-radius: 5px;
            background-color: #fff;
            transition: background-color 0.3s ease;
        }

        nav a:hover {
            background-color: #007bff;
            color: #fff;
        }

        section {
            padding: 40px; /* Increased padding for more spacing */
            text-align: center;
        }

        section img {
            max-width: 100%; /* Make sure the image doesn't exceed its container */
            border-radius: 10px; /* Add a subtle border-radius to the image */
            margin-bottom: 20px; /* Add space below the image */
        }

        section p {
            margin-bottom: 20px; /* Add space below the paragraph */
        }
        @media only screen and (max-width: 600px) {
    /* Styles for small screens */
    header {
        padding: 20px;
    }

    h1 {
        font-size: 2em;
    }

    /* Add more responsive styles as needed */
}