<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mahdi Khesali - Personal Website</title>
    <style>
            body {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                text-align: left; /* this ensures all text on the website is left-aligned */
            }

            nav {
                display: flex;
                justify-content: space-between;
                background-color: #333;
                padding: 10px;
            }

            nav a {
                color: white;
                margin: 0 15px;
                text-decoration: none;
            }

            nav a:hover {
                text-decoration: underline;
            }

            .home {
                display: flex;
                padding: 20px;
                width: 100%;
            }

            .photo img {
                max-width: 300px;       /* or however large you want the image to be */
                margin-right: 30px;    /* some space between the image and the text */
            }
            .content-sections {
                flex: 1;               /* ensures this div takes up the remaining space */
            }
            .content-sections {
                flex: 1;               /* ensures this div takes up the remaining space */
                width: 50%;            /* sets the width to 80% of its parent */
                margin: 0 auto;        /* centers the div horizontally */
            }


            .intro-text {
                flex: 1; /* makes sure the text takes up remaining space */
                padding-left: 20px;   /* adjust the value as per your needs */
            }

            #papersList {
                margin-top: 20px;
                padding-left: 20px;   /* adjust the value as per your needs */
            }
            h1 {
                font-size: 24px; /* Adjust this value based on your preference */
            }

            h2 {
                font-size: 16px; /* Make this consistent with h1 */
                border-bottom: 2px solid #333;
                padding-bottom: 10px;
                margin-top: 30px;
                margin-bottom: 20px;
            }

            .paper {
                background-color: #fff;
                padding: 10px 15px;
                margin-bottom: 10px;
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            

            a {
                color: blue;
                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }
            .contact-info {
            margin-top: 20px;
            }
            .contact-info a {
                margin-right: 10px; /* Some space between links */
                color: blue;
                text-decoration: none;
            }
            .contact-info a:hover {
                text-decoration: underline;
            }
            * {
                box-sizing: border-box;
            }
            #research {
                padding-left: 20px;   /* adjust the value as per your needs */
            }
            #contact{
                padding-left: 20px;   /* adjust the value as per your needs */
            }
            .additional-info {
                font-size: small; 
                margin-left: 10px;  /* Optional: Add some space between the paper link and additional info */
            }






    </style>
</head>

<body>

<nav>
  <a href="index.html">About Me</a>
  <a href="1_papers.html">Papers</a>
  <a href="2_codeData.html">Codes and Data</a>
  <a href="3_essay.html">Essay</a>
  <a href="4_slides.html">Slides</a>
</nav>

<section class="home">
  <div class="photo">
    <img src="images/Foto_website.png" alt="Mahdi Khesali">
    <div class="contact-info">
      <p>You can reach me at: <br>
        <a href="mailto:khesali.mahdi@gmail.com">khesali.mahdi@gmail.com</a>
      </p>
      <p>You can see my CV
        <a href="https://www.dropbox.com/scl/fi/6c34rukrb8em0b1yykj82/CV_Khesali.pdf?rlkey=m1i20obi0n3xgum9zbxyfkrj3&st=604sa9lh&dl=0"
           rel="noopener noreferrer" target="_blank">here</a>.
      </p>
      <p>Find me on social media:
        <a href="https://github.com/mahdi-khesali" target="_blank" rel="noopener noreferrer">GitHub</a> |
        <a href="https://twitter.com/KhesaliMahdi" target="_blank" rel="noopener noreferrer">Twitter</a> |
        <a href="https://www.linkedin.com/in/mahdi-khesali-0b6912135/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      </p>
    </div>
  </div>

  <div class="content-sections">
    <h1>About Me</h1>
    <div class="intro-text">
      <p>I earned my Bachelor's degree in Law in my home country and completed my Master's in Public Economics, Law, and Politics (PELP) at Leuphana University in Germany. Since 2020, I have been pursuing dual PhDs—one in Law at the University of Bonn and another in Economics at the University of Hamburg.</p>
      <p>I have also been working as a research associate at the Institute of Law and Economics (ILE) at the University of Hamburg since 2020.</p>
      <p>My research interests lie in cultural economics, empirical legal studies, and computational social science. I use both experimental and observational data to study human behavior influenced by social and legal norms. The topics that particularly interest me include:</p>
      <ul>
        <li>Causes and consequences of cultural traits</li>
        <li>Interplay between culture and institutions</li>
        <li>Cultural change</li>
        <li>Education and migration policies</li>
      </ul>
    </div>

    <section id="about">
      <h2>Research Interests</h2>
      <ul>
        <li class="list-item">Cultural Economics</li>
        <li class="list-item">Political Economics</li>
        <li class="list-item">Comparative Economic Development</li>
        <li class="list-item">Education and migration policies</li>
        <li class="list-item">Empirical Legal Studies</li>
      </ul>
    </section>
  </div>
</section>

</body>

</html>