/* set the main background for the light theme to pink */
:root {
    --wh-color-bg-main: rgb(255, 255, 255);
}

/* customize banner images */
.article__img.article__bordered-element {
    display: block; /* Treat the image as a block element */
    border-radius: 30px !important;
    border: none;
    width: 100%; /* Make the image span its container */
    aspect-ratio: 24 / 9; /* Enforce a 16:9 aspect ratio */
    object-fit: cover; /* Ensure the image is cropped to fill the aspect ratio */
    filter: brightness(0.7); /* Reduce brightness to 80% */
    z-index: 10; /* Ensure it stays above other elements */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Optional: Add a shadow for better visual separation */
}

.title span.copyright {
    font-size: 0.8em;
    vertical-align: super;
}

/* customize the color of definition list titles */
.collapse__header.definition-list__title {
    color: #3d97a4; \# Replace with your desired color code
}

/* center the table header text */
.table__thead th {
    text-align: center;
}

/* Apply gradient fill to each tab */
[data-test="tab"] {
    color: white; /* Ensure the text is readable */
    text-align: center; /* Center the text inside the tab */
    margin: 4px; /* Add spacing between tabs */
}

/* Highlight the selected tab */
[data-test="tab tab-selected"]{
    background: linear-gradient(to bottom, rgba(138, 43, 226, 0.05), rgba(148, 0, 211, 0.25));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow for focus */
}

[data-test="tab tab-selected"] [data-test="tab-title"]{
    color: #FF7F50; /* Emerald font color for the selected tab */
}