body {
  background-color: #FDF7E3; /* Creamy background color */
  margin: 0;
  font-family: "Times New Roman", serif; /* Classic font style */
  line-height: 1.6; /* Adequate line height for readability */
}

h1, h2 {
  text-align: center; /* Center-align headings */
  color: #854D1B; /* Dark brown heading color */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Add a subtle text shadow */
}

h1 {
  font-size: 56px; /* Larger font size for h1 */
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px; /* Space between h1 and content */
  border-bottom: 2px solid #854D1B; /* Add a bottom border for underline effect */
  text-transform: uppercase; /* Uppercase h1 text */
  letter-spacing: 3px; /* Add some letter spacing for a decorative look */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* Enhanced text shadow */
}

h2 {
  font-size: 32px; /* Slightly smaller font size for h2 */
  font-weight: normal; /* Remove bold font weight from h2 */
  margin-bottom: 10px;
  padding-bottom: 5px; /* Space between h2 and content */
  border-bottom: 1px solid #854D1B; /* Add a bottom border for underline effect */
}

/* Style the links */
a {
  color: #5D4037; /* Dark brown link color */
  text-decoration: underline; /* Add underline to links */
  padding: 2px 5px; /* Add small padding around the links */
  transition: color 0.3s ease; /* Smooth transition on link color */
}

a:hover {
  color: #7B5E57; /* Lighter brown link color on hover */
  text-decoration: none; /* Remove underline on hover */
}

#content {
  margin: 20px;
}

#menu {
  font-size: 120%;
  background-color: #F7CBA6; /* Light peach background color */
  border-bottom: 1px solid #CCA87E; /* Light brown border */
  padding: 15px;
  text-align: left; /* Center-align the menu content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
  display: flex; /* Use flexbox to align menu items horizontally */
  justify-content: left; /* Center-align menu items horizontally */
}

#menu a {
  color: #854D1B; /* Dark brown link color */
  text-decoration: none; /* Remove underline from links */
  padding: 8px 20px; /* Add padding around the links */
  margin: 0 10px; /* Add spacing between links */
  border-radius: 4px; /* Rounded corners for links */
  background-color: #FFEDD5; /* Very light peach background */
  transition: background-color 0.3s ease; /* Smooth transition on background-color */
}

#menu a:hover {
  background-color: #F7CBA6; /* Light peach background color on hover */
}

#footer {
  font-size: 120%;
  background-color: #F7CBA6; /* Light peach background color */
  border-top: 1px solid #CCA87E; /* Light brown border */
  padding: 15px;
  text-align: left; /* Center-align the menu content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
  display: flex; /* Use flexbox to align menu items horizontally */
  justify-content: left; /* Center-align menu items horizontally */
}

#trans {
  font-size: 90%; /* Slightly smaller font for translations */
  color: #736357; /* Dark brownish-gray text color */
}

#bibletext, #verseText {
  font-size: 24px; /* Larger font size for main text */
  text-align: justify;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15px; /* Add more padding around the text for a classic feel */
  background-color: #FFEDD5; /* Very light peach background */
  border: 1px solid #CCA87E; /* Light brown border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
}

#bibletext::first-letter {
  font-size: 200%; /* Increase first-letter font size for a decorative look */
  padding-right: 5px; /* Smaller padding for first letter */
  initial-letter: 3;
}

.versenumber {
  color: #A03000; /* Darker red verse numbers */
  font-weight: bold;
}

/* Style the form */
form {
  margin-top: 20px;
}

/* Style the language label */
form label {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
  margin-right: 10px;
  color: #854D1B; /* Dark brown text color */
}

/* Style the language select dropdown */
form select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #CCA87E; /* Light brown border */
  border-radius: 4px;
  background-color: #FFEDD5; /* Very light peach background */
  color: #854D1B; /* Dark brown text color */
  appearance: none; /* Remove default appearance on modern browsers */
  -webkit-appearance: none; /* Remove default appearance on older WebKit browsers */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 0l6 6 6-6z'/%3E%3C/svg%3E"); /* Custom dropdown arrow icon */
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Style the submit button */
button[type="submit"] {
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #CCA87E; /* Light brown border */
  border-radius: 4px;
  background-color: #F7CBA6; /* Light peach background color */
  color: #854D1B; /* Dark brown text color */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition on background-color */
}

button[type="submit"]:hover {
  background-color: #F9B980; /* Slightly darker peach background color on hover */
}

/* Style the custom checkbox */
form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #CCA87E;
  border-radius: 3px;
  background-color: #FFEDD5;
  outline: none;
  vertical-align: middle;
  margin-right: 6px;
  position: relative; /* Add relative positioning */
  cursor: pointer;
}

/* Style the custom checkmark */
form input[type="checkbox"]::before {
  content: "\2714"; /* Unicode checkmark symbol */
  position: absolute;
  top: -3px;
  left: 2px;
  color: #854D1B; /* Dark brown checkmark color */
  font-size: 16px;
  display: none; /* Hide the checkmark by default */
}

/* Show the custom checkmark when the checkbox is checked */
form input[type="checkbox"]:checked::before {
  display: block;
}

span#chapterAndLanguageHeader {
  display: block;
  text-align: center; /* Center-align header text */
  margin-bottom: 20px;
}

/* Style the header text */
span#chapterAndLanguageHeader h2 {
  font-size: 32px; /* Increase font size for a more prominent header */
  color: #854D1B; /* Dark brown header text color */
  margin: 0;
  text-transform: uppercase; /* Uppercase header text */
  letter-spacing: 2px; /* Add some letter spacing for a decorative look */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); /* Add a subtle text shadow */
  border-bottom: 2px solid #854D1B; /* Add a bottom border for underline effect */
  padding-bottom: 5px; /* Space between header text and underline */
}

#chapterNavigation {
  width: 30%;
  float: right;
  padding: 15px;
  border: 1px solid #CCA87E; /* Light brown border */
  border-radius: 4px;
  background-color: #F7CBA6; /* Light peach background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
  transition: box-shadow 0.3s ease; /* Smooth transition on box-shadow */
  margin-left: 15px;
}

#translationsBox {
  padding: 15px;
  border: 1px solid #CCA87E; /* Light brown border */
  border-radius: 4px;
  background-color: #F7CBA6; /* Light peach background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
  transition: box-shadow 0.3s ease; /* Smooth transition on box-shadow */
  margin-left: 15px;
}


.chapterNumber{
  float:left;
  padding: 7px;
  margin: 7px;
  border: 1px solid #CCA87E; /* Light brown border */
  border-radius: 4px;
  background-color: #F7CBA6; /* Light peach background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
  transition: box-shadow 0.3s ease; /* Smooth transition on box-shadow */
  margin-left: 15px;
  font-size: 100%;
}