<!-- CSS Styling -->
<style>

    /* Apply Flexbox centering to the parent container */
    body, html {
        height: 100%; /* Full height of the viewport */
        margin: 0; /* Reset default margins */
        display: flex; /* Use Flexbox */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

    /* Style the .hero section */
    .hero {
        text-align: center; /* Center the text inside */
        padding: 100px 50px 100px 50px;
        background-color: #ebe4e4;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
        border-radius: 10px; /* Optional rounded corners */
    }

    
    .hero h1 {
        font-size: 2em; /* Reduced font size */
        margin-bottom: 10px;
        color: #333;
    }

    .hero p {
        font-size: 1em; /* Reduced font size */
        color: #555;
    }

    .main-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 30px; /* Reduced gap size */
        margin: 40px 0;
    }

    .section {
        background-color: #e4eff7; /* Light blue background for content sections */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .section h2 {
        font-size: 1.4em; /* Reduced font size */
        color: #333;
        margin-bottom: 8px;
    }

    .section p {
        font-size: 0.9em; /* Reduced font size */
        color: #242222;
        line-height: 1.5em;
    }

    .additional-content {
        padding: 10px 50px 50px 50px;
        background-color: #ebe4e4; /* Softer, lighter pastel background */
        text-align: center;
    }

    .additional-content h2 {
        font-size: 1.8em; /* Reduced font size */
        margin-bottom: 15px;
        color: #333;
    }

    .additional-content ul {
        list-style: none;
        padding: 0;
    }

    .additional-content ul li {
        font-size: 1.1em; /* Reduced font size */
        margin: 8px 0;
        color: #444;
    }

    .additional-content p {
        font-size: 0.9em; /* Reduced font size */
        margin-top: 20px;
        color: #666;
    }

        /* Style for the clickable box */
    .clickable-box {
        text-decoration: none; /* Remove underline */
        color: inherit; /* Inherit text color */
        display: block;
    }

    .clickable-box .section {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
    }

    /* Hover effect */
    .clickable-box:hover .section {
        transform: translateY(-5px); /* Slight lift on hover */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Shadow effect */
    } 


</style>


.phd-thesis-button {
  display: inline-block;
  padding: 20px 30px;
  background-color: #ffcccc;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.5em;
  transition: background-color 0.3s ease;
}

.phd-thesis-button:hover {
  background-color: #ff9999; /* Slightly darker on hover */
}

.phd-thesis-button span {
  margin-right: 8px;
}
