body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f0f0; /* Light gray */
}

header {
    background-color: #ff5858; /* Red */
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 50px; /* Adjust size as needed */
    height: 50px; /* Adjust size as needed */
    border-radius: 50%; /* Make it rounded */
    margin-right: 10px;
}

.logo h1 {
    color: blue;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: blue;
    text-decoration: none;
}

h2 {
    text-align: center; /* Center the text */
    margin: 0; /* Remove default margins */
    flex-grow: 1; /* Take up remaining space */
}

main {
    padding: 20px;
}

section {
    margin-bottom: 30px;
}

h2 {
    color: #00539f; /* Dark blue */
}

#about {
    background-color: #f9f9f9; /* Light gray background */
    padding: 50px 0; /* Add some padding for spacing */
}

.about-container {
    display: flex;
    flex: 1;
    margin-right: 20px;
    justify-content: center;
    align-items: center;
    max-width: 800px; /* Limit the width of the container */
    margin: 0 auto; /* Center the container horizontally */
}

.profile {
    flex: 0 0 200px; /* Set fixed width for the profile picture */
    margin-left: 20px; /* Add some space between the profile picture and content */
}

.profile img {
    width: 100%;
    border-radius: 50%; /* Make the profile picture rounded */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.about-content {
    flex: 1; /* Take up remaining space */
}

.about-content h2 {
    color: #00539f; /* Dark blue */
    margin-top: 0; /* Remove default top margin */
}

.about-content p {
    font-size: 18px; /* Increase font size for readability */
    line-height: 1.5; /* Improve line spacing */
    color: #333; /* Dark text color */
}

.profile img.rounded {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    border: 5px solid #ff6600; /* Orange */
}
#interests {
    margin-top: 50px; /* Add some space at the top */
}

table {
    width: 100%;
    border-collapse: collapse; /* Collapse borders */
    border: 2px solid #333; /* Add border to the table */
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* Add bottom border */
    border-right: 1px solid #ddd; /* Add right border */
    border-left: 2px solid #ddd; /* Add left border */
}

th {
    background-color: #6567bb; /* Light gray background for table headers */
    border-top: 2px solid #333; /* Add top border for table headers */
    border-bottom: 2px solid #333; /* Add bottom border for table headers */
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none; /* Remove default list styles */
}

ul li:before {
    content: "\2022"; /* Use bullet point as list item marker */
    color: #ff5858; /* Red color for bullet point */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

td ul li {
    margin-bottom: 5px; /* Add some space between list items */
}

td ul li:last-child {
    margin-bottom: 0; /* Remove margin from last list item */
}


footer {
    background-color: #00539f; /* Dark blue */
    color: white;
    padding: 20px;
    text-align: center;
}

footer ul {
    list-style-type: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 10px;
}

.carousel {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-right: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}