body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    line-height: 1.6;
}

.header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

/* all three sections */
.content {
    display: flex;
    justify-content: center;
}


/* left section css */
.left-section {
    width: 20%;               /* your desired width */
    margin: 0 auto;           /* center horizontally in the page */
    display: flex;            /* so you can flex the contents */
    flex-direction: column;
    align-items: center;      /* center items (image, email, signature) within the container */
    justify-content: center;
}

.mail-section {
    margin-top: 10px;
    display: flex;         /* row flex by default */
    align-items: center;   /* vertically center icon & link */
    justify-content: center;
}

.mail-section i {
    margin-right: 6px;     /* spacing between icon and link */
}

.signature {
    margin-top: 10px;      /* space above signature */
    text-align: center;    /* center the text if desired */
}


/* profile photo css */
.profile-photo {
    width: 13em;
    height: 13em;
    border-radius: 50%;  /* Circular image */
}

/* center section css */
.center-section {
    width: 75%;
    padding: 2em;
    /* max-width: 800px; */
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.center-section h2,
.center-section h3 {
    color: #333;
}


.center-section table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; 
}


.center-section th {
    border: 1px solid black;
    padding: 8px;
}


.center-section th.topic, .center-section td.topic {
    width: 30%; 
}


.center-section th.abstract, .center-section td.abstract {
    width: 70%; 
    word-wrap: break-word;
}


.center-section td {
    border: 1px solid black;
    padding: 8px;
    vertical-align: top; 
}


/* Project link color and hover effect */
.center-section .topic a {
    color: #ff00ee; /* Teal color for project links */
    text-decoration: none;
}

.center-section .topic a:hover {
    color: #ff4400; /* Coral color on hover */
    text-decoration: underline;
}


/* Set up CSS for Titanic */
#Titanic {
    font-weight: bold; /* Makes the text bold */
    font-style: italic;
}


/* For Thumb Rating*/
.post {
    width: 100%; 
    max-width: 800px; 
    margin: auto; 
    font-family: 'Lexend', sans-serif;

}

.post-ratings-container {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.post-rating {
    display: flex;
    align-items: center;
    cursor: default;
}

.post-rating:not(:last-child) {
    margin-right: 12px;
}

.post-rating-selected>.post-rating-button,
.post-rating-selected>.post-rating-count {
    color: #009578;
}

.post-rating-button {
    margin-right: 6px;
    cursor: pointer;
    color: #555555;
}

.post-rating:not(.post-rating-selected)>.post-rating-button:hover {
    color: #000000;
}


.clicked {
    transform: scale(1.3); 
    transition: transform 0.2s; 
}


.bounce {
    animation: bounce 0.5s; 
}


@keyframes bounce {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-10px);
    }
}




/* footer section css */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}