body{
    background-color: #0C2340;
}

p{
    font-family: "Crimson Text", serif;
    margin-bottom: 0%;
    font-size: 20px;
}

h1{
    font-family: "Roboto", sans-serif;
    font-size: larger;
    font-weight: bold;
}

h2{
    font-family: "Roboto", sans-serif;
    font-size: large;
    font-weight: bold;
    margin-top: 5px;
}

.maintext{
    background-color: #fff;
    border-radius: 5px;
    padding: 15px 15px 35px 15px;
    margin-bottom: 5%;
    box-shadow: 5px 5px 2px #9C6869;
    max-width: 80%;
}

span.line-number{
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 16px;
    color:#9C6869;
}


/* add custom Bootstrap color and font */
:root{
    --bs-gold: #AE9142;
    --bs-navy: #0C2340;
    --bs-font-monospace: "Crimson-Text", monospace;
}

.bg-gold {
    color:var(--bs-gold)
}

.bg-navy {
   color:var(--bs-navy) 
}

/* popover styles for defined words and translation notes */
.popover-word{
    color: #AE9142;
    cursor: pointer;
    font-weight: bold;
}

.popover-word:hover{
    background-color: #EFE9DC;
}

.popover-note{
    color: #6a6968;
    cursor: pointer;
    font-weight: bold;
    float: inline-end;
}

.popover-note:hover{
    background-color: #EFE9DC;
}

.custom-popover{
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-header-bg: var(--bs-gold);
    --bs-popover-border-color: var(--bs-gold);
    --bs-popover-border-width: 1.5px;
    --bs-popover-arrow-color: var(--bs-gold);
}

.custom-popover2{
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-header-bg: var(--bs-navy);
    --bs-popover-border-color: var(--bs-gold);
    --bs-popover-border-width: 1.5px;
    --bs-popover-arrow-color: var(--bs-gold);
}

/* Add offcanvas styles for commentaries */

.side-comment{
    color: #6a6968;
    cursor: pointer;
    font-weight: bold;
    float: inline-end;
}
.side-comment:hover{
    background-color: #EFE9DC;
}

.entry{
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}

.oc-em{
    color: #AE9142;
    font-style: italic;
    font-weight: bold;
}

/*
.offcanvas{
    --bs-offcanvas-width: 25%;
} */

/* Navigation */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover:not(.active) {
  background-color: #867856;
}

.active {
  background-color:#AE9142;
}