:root {
    --base-font-size: 16px;
    --ref-font-size: 14px;
    --hebrew-font-size: 18px;
    --citation-hebrew-font-size: 34px;
}

body {
    background-color: rgb(132, 167, 232);
    color: rgb(34, 34, 31);
    font-family: Helvetica, sans-serif;
    font-size: var(--base-font-size);
}
label {
    background-color: rgb(228, 222, 222);
    color: rgb(34, 34, 31);
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}
button {
    color: blue;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
}
iframe {
    background-color: rgb(228, 222, 222);
    color: rgb(34, 34, 31);
    font-size: var(--base-font-size);
}
pre {
    background-color: rgb(228, 222, 222);
    color: rgb(34, 34, 31);
    font-family: Helvetica, sans-serif;
    font-size: 16px;
}
b {
    color: rgb(0, 102, 204); /* Blue color for bold text */
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    font-size: var(--base-font-size);
    background-color: rgb(255, 255, 255); /* White background for contrast */
    padding: 2px 4px;
    border-radius: 3px;
}
.chapitre {
    background-color: rgb(255, 255, 204); /* Light yellow background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: var(--hebrew-font-size); /* Slightly larger font size */
    font-weight: bold; /* Bold text */
    padding: 10px 15px; /* Padding for spacing */
    border-left: 5px solid rgb(0, 102, 204); /* Blue left border */
    margin: 20px 0; /* Margin for spacing between chapters */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
a {
    color: rgb(34, 34, 31);
    text-decoration: none; /* Remove underline */
    font-family: Helvetica, sans-serif;
    font-size: var(--base-font-size);
    transition: color 0.3s ease; /* Smooth transition for color change */
}
a:hover {
    color: rgb(83, 35, 11);
}
.lien  {
    color: rgb(0, 102, 204); /* Blue color for bold text */
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for color change */
}
.lien:hover {
    color: rgb(219, 84, 16);
    text-decoration: underline; /* Underline on hover */
    font-weight: bold; /* Bold on hover */
}
.menu {
    background-color: rgb(228, 222, 222);
    color: rgb(34, 34, 31);
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    padding: 10px;
    border-bottom: 2px solid rgb(34, 34, 31);
}
.menu a {
    color: rgb(0, 102, 204);
    text-decoration: none; /* Remove underline */
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    transition: color 0.3s ease; /* Smooth transition for color change */
}
.menu a:hover {
    color: rgb(219, 84, 16);
    text-decoration: underline; /* Underline on hover */
    font-weight: bold; /* Bold on hover */
}
.hebreu {
    font-family: 'David Libre', serif;
    font-size: var(--hebrew-font-size);
    color: rgb(34, 34, 31);
    text-align: right;
    direction: rtl;
}

.paragraph {
    background-color: rgb(245, 245, 245); /* Light grey background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: Helvetica, sans-serif; /* Sans-serif font */
    font-size: var(--base-font-size); /* Medium font size */
    line-height: 1.6; /* Line height for readability */
    padding: 10px 15px; /* Padding for spacing */
    border-left: 3px solid rgb(83, 35, 11); /* Dark brown left border */
    margin: 10px 0; /* Margin for spacing between paragraphs */
    border-radius: 3px; /* Slightly rounded corners */
    box-sizing: border-box; /* Include padding in width calculation */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

h1 {
    background-color: rgb(255, 255, 255); /* White background */
    color: rgb(0, 102, 204); /* Blue text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: 32px; /* Larger font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Centered text */
    padding: 20px; /* Padding for spacing */
    border-bottom: 3px solid rgb(0, 102, 204); /* Blue bottom border */
    margin: 20px 0; /* Margin for spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
h2 {
    background-color: rgb(245, 245, 245); /* Light grey background */
    color: rgb(83, 35, 11); /* Dark brown text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: 24px; /* Medium font size */
    font-weight: bold; /* Bold text */
    text-align: left; /* Left-aligned text */
    padding: 15px; /* Padding for spacing */
    border-bottom: 2px solid rgb(83, 35, 11); /* Dark brown bottom border */
    margin: 15px 0; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
h3 {
    background-color: rgb(255, 255, 240); /* Light yellow background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: 20px; /* Medium font size */
    font-weight: bold; /* Bold text */
    text-align: left; /* Left-aligned text */
    padding: 10px; /* Padding for spacing */
    border-bottom: 1px solid rgb(0, 102, 204); /* Blue bottom border */
    margin: 10px 0; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
}
h4 {
    background-color: rgb(255, 255, 240); /* Light yellow background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: 18px; /* Medium font size */
    font-weight: bold; /* Bold text */
    text-align: left; /* Left-aligned text */
    padding: 8px; /* Padding for spacing */
    border-bottom: 1px solid rgb(0, 102, 204); /* Blue bottom border */
    margin: 8px 0; /* Margin for spacing */
    border-radius: 5px; /* Rounded corners */
}
.citation {
    background-color: rgb(255, 255, 240); /* Light yellow background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-size: var(--hebrew-font-size); /* Medium font size */
    font-style: italic; /* Italic text */
    padding: 10px 15px; /* Padding for spacing */
    border-left: 4px solid rgb(0, 102, 204); /* Blue left border */
    margin: 15px 0; /* Margin for spacing between citations */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.citation-hebrew {
    font-family: 'David Libre', serif;
    font-size: var(--citation-hebrew-font-size);
    color: rgb(34, 34, 31);
    text-align: right;
    direction: rtl;
    background-color: rgb(255, 255, 240); /* Light yellow background */
    padding: 10px 15px; /* Padding for spacing */
    border-left: 4px solid rgb(0, 102, 204); /* Blue left border */
    margin: 15px 0; /* Margin for spacing between citations */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.img-fluid {
    border-radius: 10px; /* Rounded corners */
    width: auto; 
    height:350px;
    margin-right: 20px;
}
.dailyVerses.bibleVerse
{
margin-top: .5em;
}
.dailyVerses.bibleVerse a
{
font-weight: bold;
}
.rss-feed {
    background-color: rgb(245, 245, 245); /* Very light grey background */
    color: rgb(34, 34, 31); /* Dark text color */
    font-family: Helvetica, sans-serif; /* Sans-serif font */
    font-size: 12px; /* Smaller font size */
    line-height: 1.4; /* Line height for compact readability */
    padding: 10px; /* Less padding for compact spacing */
    border: 1px solid rgb(220, 220, 220); /* Light grey border */
    border-radius: 3px; /* Slightly rounded corners */
    margin: 10px 0; /* Less margin for compact spacing */
}

.rss-feed h3 {
    font-size: 12px; /* Smaller font size for titles */
    font-weight: bold; /* Bold text */
    color: rgb(0, 102, 204); /* Blue text color */
}

.rss-feed a {
    color: rgb(0, 102, 204); /* Blue color for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.rss-feed a:hover {
    color: rgb(219, 84, 16); /* Darker color on hover */
    text-decoration: underline; /* Underline on hover */
}
#loadingIndicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ref {
    color: rgb(0, 102, 204); /* Blue color for reference links */
    font-family: Helvetica, sans-serif; /* Sans-serif font */
    font-size: var(--ref-font-size); /* Slightly smaller font size */
    text-decoration: none; /* Remove underline */
    padding: 2px 4px; /* Padding for spacing */
    border-radius: 3px; /* Slightly rounded corners */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.result {
    font-size: var(--ref-font-size); /* Medium font size */
}

.ref:hover {
    color: rgb(219, 84, 16); /* Darker color on hover */
    text-decoration: underline; /* Underline on hover */
    font-weight: bold; /* Bold on hover */
}

.colonne-gauche {
    width: 50%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px; /* Rounded corners */
}

.colonne-droite {
    width: 50%;
    float: right;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px; /* Rounded corners */
}

.row {
    clear: both;
}

.foot {
    background-color: rgb(228, 222, 222);
    color: rgb(34, 34, 31);
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    padding: 10px;
    border-top: 2px solid rgb(34, 34, 31);
    text-align: center;
}

.notes {
    font-family: Helvetica, sans-serif; /* Sans-serif font */
    font-size: var(--ref-font-size); /* Slightly smaller font size */
    color: rgb(83, 35, 11); /* Dark brown text color */
    text-align: right; /* Align text to the right */
    margin-top: 10px; /* Space above the note */
    padding: 5px 10px; /* Padding for spacing */
    border-top: 1px solid rgb(220, 220, 220); /* Light grey top border */
    font-style: italic; /* Italic text for emphasis */
}

.notes a {
    font-family: Helvetica, sans-serif; /* Sans-serif font */
    font-size: var(--ref-font-size); /* Slightly smaller font size */
    color: rgb(83, 35, 11); /* Dark brown text color */
    text-align: right; /* Align text to the right */
    margin-top: 10px; /* Space above the note */
    padding: 5px 10px; /* Padding for spacing */
    border-top: 1px solid rgb(220, 220, 220); /* Light grey top border */
    font-style: italic; /* Italic text for emphasis */
}

div.notes {
    font-family: Helvetica, sans-serif !important; /* Sans-serif font */
    font-size: var(--ref-font-size) !important; /* Slightly smaller font size */
    color: rgb(83, 35, 11) !important; /* Dark brown text color */
    text-align: right !important; /* Align text to the right */
    margin-top: 10px !important; /* Space above the note */
    padding: 5px 10px !important; /* Padding for spacing */
    border-top: 1px solid rgb(220, 220, 220) !important; /* Light grey top border */
    font-style: italic !important; /* Italic text for emphasis */
}
p.notes {
    font-family: Helvetica, sans-serif !important; /* Sans-serif font */
    font-size: var(--ref-font-size) !important; /* Slightly smaller font size */
    color: rgb(83, 35, 11) !important; /* Dark brown text color */
    text-align: right !important; /* Align text to the right */
    margin-top: 10px !important; /* Space above the note */
    padding: 5px 10px !important; /* Padding for spacing */
    border-top: 1px solid rgb(220, 220, 220) !important; /* Light grey top border */
    font-style: italic !important; /* Italic text for emphasis */
}
.poeme {
    font-style: italic;
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
}
.poeme p {
    margin: 10px 0;
}

.table-of-contents {
    background-color: #f5f7fa;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 20px 0;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.07);
}

.table-of-contents a:hover {
    color: #d95a10;
    text-decoration: underline;
}

.no-js {
    visibility: visible;
}
/* Ajoutez d'autres styles en utilisant les variables CSS */