body {
    color: #000000;
    font-family: 'Ubuntu', sans-serif; /* Added fallback font */
    font-size: 12pt; /* Slightly increased font size */
    font-weight: 400; 
    font-style: normal;
    line-height: 1.6; /* Increased line height for readability */
    background-color: #f9f9f9; /* Light background for reduced eye strain */
    padding: 5px; /* Padding around the body for breathing space */
    margin: 0; /* Remove default margin */
    max-width: 975px; /* Set a maximum width for the content area */
    margin-left: auto; /* Center the content */
    margin-right: auto; /* Center the content */
}

p {
    text-align: left;
    line-height: 1.2; /* Consistent with body line height */
    margin-top: 1.5em; /* Slightly increased top margin for space */
    margin-bottom: 3em; /* Slightly increased bottom margin for space */
    padding-left: 10px; /* Optional: add some padding on the left */
    padding-right: 10px; /* Optional: add some padding on the right */
}

a {
    color: #4271ae; /* Using the same color for links */
}

mark {
    background: #ffffa6;
}

h1, h2, h3, h4 {
    color: #4271ae;
    page-break-after: avoid;
}

h1 {
    font-size: 2.50em; /* Increased size for prominence */
    margin-top: 1.5em;
    margin-bottom: 1em; /* Increased margin for breathing space */
    text-align: center; /* Center align the title */
}

h2 {
    font-size: 2em; /* Adjusted size */
    margin-top: 1.5em;
    margin-bottom: 0.8em; /* Increased margin for breathing space */
}

h3 {
    font-size: 1.75em; /* Adjusted size */
    margin-top: 1.5em;
    margin-bottom: 0.6em; /* Increased margin for breathing space */
}

h4 {
    font-size: 1.5em; /* Adjusted size */
    margin-top: 1.5em;
    margin-bottom: 0.6em; /* Increased margin for breathing space */
}

.title {
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    font-size: 4rem;
    font-weight: bold;
    color: #111;
    text-decoration: underline;
}

.sep {
    text-align: center;
    margin-top: 1.5em; /* Increased margin for breathing space */
    margin-bottom: 1.5em; /* Increased margin for breathing space */
}

h1:focus, h2:focus, h3:focus, h4:focus, p:focus {
    outline: 2px solid #4271ae; /* Accessible outline for focused elements */
}

#top-prev-btn {
  background: none;
  border: none;
  color: #4271ae;
  font-size: 2em;
  cursor: pointer;
  margin-bottom: 1em;
}

#top-prev-btn:hover {
  text-decoration: underline;
}


#dropdown-toc {
  position: relative; /* No longer fixed */
  display: flex;
  justify-content: flex-end; /* Push to the right */
  margin-top: 1em;
  margin-right: 1em;
  font-family: sans-serif;
  /* display: none; */
}

#dropdown-toc select {
  padding: 0.75em 1.25em; /* Bigger padding */
  font-size: 1.25em;      /* Bigger text size */
}


#chapter-nav {
  margin-top: 2em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: sans-serif;
  min-height: 3em;
}


#chapter-nav button {
  padding: 0.75em 1.5em;
  font-size: 2em;
  background-color: #111;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#chapter-nav button:hover {
  background-color: #555;
}

/* changes for desktop and tablets */
@media (min-width: 768px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
    body {
        font-size: 18.7pt; /* ~18.7px, good for tablets/desktops */
    }
    p {
      margin-top: 0.5em; /* Slightly increased top margin for space */
      margin-bottom: 1.5em; /* Slightly increased bottom margin for space */
    }
    #chapter-nav button {
      font-size: 0.9em;
    }
    #dropdown-toc select {
      padding: 0.5em 1em; /* Bigger padding */
      font-size: 1em;      /* Bigger text size */
    }
    #top-prev-btn {
      font-size: 1em;
    }
}