styles.css

@import url(
	'https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'
);
@import url(
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'
);
@import url(
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css'
);
@import url(
    "https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"
);


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

header {
    background-color: #264653;  /* Deep Blue */
    color: #fff;
    text-align: center;
    padding: 2.4rem 0;
}

header h3 {
    font-weight: 300;
    font-size: 1.2em;
    padding-top: 0.25em;
    margin-top: 0.8em;
}

.institution {
    font-weight: 200;
    font-size: 1.1em;
    font-style: italic;
    margin-top: -.4em;
}

.venue {
    font-weight: 400;
    font-size: 1.1em;
    margin-top: -.2em;
}

.section {
    font-weight: 400;
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    padding-top: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.title_link {
    text-decoration: none;
    margin-left: 10px;  /* Add spacing between the two buttons */
    margin-right: 5px;  /* Add spacing between the two buttons */
    color: #ffffff;
}

.title_link:hover {
    color: #d0d0d0;
	border-bottom: 3px #c0c0c0;
}

.venue_link {
    text-decoration: none;
    color: #ffffff;
}

.venue_link:hover {
    color: #d0d0d0;
	border-bottom: 3px #c0c0c0;
}

a:last-child {
    margin-right: 0;
}

a[href^="mailto:"] {
    /* styles for email links */
    color: #264653;
    text-decoration: underline;
    margin-left: 0px;
}

button {
    font-family: 'Lato', sans-serif;
    color: #fff;
    border: none;
    padding: 12px 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1.2em;
    width: 220px;
    border-radius: 4px;  /* Rounded button edges */
}

.eval_rating_button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: auto
}

.clicked {
    background-color: #008CBA;
}

.home-button {
    background-color: #5d5d5d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 130px;
    height: 70px;
    vertical-align: middle;
}

.home-button-wide {
    background-color: #5d5d5d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 200px;
    vertical-align: middle;
}

.demo-button {
    background-color: #7a5947;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 130px;
    height: 70px;
    vertical-align: middle;
}

.hf-button {
    background-color: #c1436d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 130px;
    height: 70px;
    vertical-align: middle;
}

.eval-button {
    background-color: #5d5d5d;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
}

.paper-button {
    background-color: #1db6c7;
    font-weight: bold;
    text-shadow: 3px 3px 1.5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 130px;
    height: 70px;
    vertical-align: middle;
}

.livedemo-button {
    background-color: #df801d;
    font-weight: bold;
    text-shadow: 3px 3px 1.5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 140px;
    height: 70px;
    vertical-align: middle;
}

.code-button {
    background-color: #18a74c;
    font-weight: bold;
    text-shadow: 3px 3px 1.5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: 0px 13px;
    width: 130px;
    height: 70px;
    vertical-align: middle;
}

a .fab.fa-github {
    color: #FEFEFE; /* or any color you prefer */
    vertical-align: bottom;
    font-size: 24px; /* adjust size as needed */
    margin: 0px 7px;
}
a .ai-arxiv {
    color: #E7352B; /* Set your desired color (arXiv red) */
}

.eval-button-small {
    background-color: #5d5d5d;
    font-size: 1em;
    width: 160px;
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 8px 5px;
}

button:hover {
    opacity: 0.75  /* A generic hover effect for all buttons */
}

a:hover .fab.fa-github {
    color: #ffb987; /* color on hover */
}

footer {
    background-color: #264653;  /* Dark Desaturated Blue */
    color: #e9e9e9;
    text-align: center;
    padding: 1rem 0;
    margin-top: 40px;
}

table {
    width: 100%;
    max-width: 630px; /* Adjusted for vertical layout */
    margin: 0 auto;
    border-collapse: collapse;
}

td {
    padding: 2px;
    padding-left: 16px;
    text-align: left;
    vertical-align: middle;
}

.demo-data {
    border-right: 5px solid #eeeeee; /* Add border to the right side of each cell */
}

/* Remove the right border from the last cell of each row */
tr td:last-child {
    border-right: none;
}

/* Base table styles */
.result-table {
    max-width: 880px;
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    margin: 12px auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-weight: 300;
}

/* Header styles */
.result-head {
    background-color: #2c3e50;
    color: #ecf0f1;
    font-weight: bold;
    text-align: left;
    padding: 8px 12px;
}

.result-head-2 {
    background-color: #55687a; /* Slightly lighter background color */
    color: #ecf0f1;
    font-weight: bold;
    text-align: left;
    padding: 8px 12px;
}

/* Row & data styles */
.result-row {
    background-color: #e7e9ee;
}
.result-row-2 {
    background-color: #ffffff;
}

.result-row:hover {
    background-color: #e0e7ee;
    cursor: pointer;
}

.result-data {
    padding: 7px 12px;
    border-bottom: 1px solid #e7ebef;
    background-color: #dfe3f241;
    font-size: 1.15em;
}
.result-data-400 {
    padding: 7px 12px;
    border-bottom: 1px solid #e7ebef;
    background-color: #dfe3f241;
    font-size: 1.15em;
    font-weight: 400;
}
.result-data-2 {
    padding: 7px 12px;
    border-bottom: 1px solid #e7ebef;
    font-size: 1.15em;
}
.result-data-2-400 {
    padding: 7px 12px;
    border-bottom: 1px solid #e7ebef;
    font-size: 1.15em;
    font-weight: 400;
}
.result-data-small {
    padding: 7px 12px;
    border-bottom: 1px solid #e7ebef;
    background-color: #dfe3f241;
    font-weight: 400;
}

/* Optional: Add transitions for smoother hover effects */
.result-row,
.result-data {
    transition: background-color 0.2s;
}

audio.scaled {
    height: 36px; /* Adjust this value as needed */
}

.bibtex {
    font-family: "Courier New", monospace;
    background-color: #f4f4f4;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
    cursor: pointer;    /* makes the area look clickable */
    overflow: hidden;   /* Ensures the copy icon is contained within the div */
}

.bibtex pre {
    margin: 0;  /* Removes default margin from <pre> */
    font-family: inherit;  /* Ensures font consistency */
    font-size: .9em;
    white-space: pre-wrap;       /* CSS3 */
    white-space: -moz-pre-wrap;  /* Firefox */
    white-space: -pre-wrap;      /* Opera <7 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* IE */
}

.copy-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;  /* or adjust as needed */
    color: #000;  /* Color of the icon */
    background-color: transparent;  /* No fill */
}

.bibtex:hover {
    background-color: #e8e8e8;  /* subtle hover effect */
}

.bibtex:hover .copy-icon {
    color: #007BFF;  /* Change color on hover for better user feedback */
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* Ensures the content inside the flex container is centered horizontally */
}
.content {
    display: inline-flex;
    align-items: center;
}