html,
body {
  height: 100%
}


body {
  background-color: var(--light);
  margin: 0rem;
  overflow-x: hidden;
  /* Hide horizontal scrollbar */

  display: flex;
  flex-direction: column;
  accent-color: #95340e;
}


.reference {
  background-color: rgb(96, 77, 0);
  color: white;
  font-family: sans-serif;
  font-size: .7rem;
  border: solid 0px;
  border-radius: 5px;
  padding: 2px 4px 2px 2px;
  display: inline;
  margin-right: .5rem;
}



span.pli-lang {
  display: block;
  font-weight: bold;
}

span.eng-lang {
  display: block;
}

p.pli-verse {
  margin-bottom: 0.3rem;
  margin-left: 1rem;
}

p.eng-verse {
  margin-bottom: 1rem;
  margin-top: 0rem;
  margin-left: 1rem;
}

span.pli-lang {
  display: block;
  font-weight: bold;
}

/* frontmatter */

.center {
  text-align: center;
}

.italic {
  font-style: italic;
}

.large {
  font-size: 1.3rem;
}

.top-margin {
  margin-top: 1rem;
}

/*
/ Alternate book layouts 
*/
.side-by-side .segment-pair {
  display: flex;
  flex-direction: row;
}

.side-by-side .segment {
  width: 50%
}

/*
/ App CSS 
*/

:root {
  --light: cornsilk;
  --less-light: rgb(159, 142, 73);
  --dark: #2d1f19;
}




.sutta-table {
  width: 100vw
}


.controls {
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  background-color: var(--dark);
  padding: 1rem;
  margin: 0rem;
  width: 100vw;
  color: var(--light);
  position: sticky;
  top: 0px;
  font-family: sans-serif;
}



.accordion {
  padding: 1px 3px 2px 5px;
  border: solid 1px;
  border-radius: 3px;
  width: 2.5rem;
  font-size: .8rem;
}

.info-section {
  max-width: 95vw;
}

.info-section {
  padding: 0 0 1rem 1rem;
  min-width: 10rem;
  overflow-y: auto;
  max-height: 20rem;
  overscroll-behavior: contain;
  background-color: #4e362c;
}

b.head {
  color: var(--less-light);
}

button {
  border: solid 1px gray;
  background-color: e8e9ed;
  border-radius: 5px;
  padding-right: 10px;
}

#row-one,
#row-two {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

#progress-outer {
  width: 100px;
  height: 25px;
  border: solid 0px rgb(67, 67, 67);
}

#progress-bar {
  background-color: green;
  width: 0%;
  height: 23px;
  padding: 2px 0px 0px 0px;
}

#progress-label {
  padding: 2px 0px 0px 4px;
}

.blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

h1,
h2 {
  font-weight: normal;
}

h1:before {
  content: "【h1】";
  font-size: 1rem;
  color: var(--less-light)
}

h2:before {
  content: "【h2】";
  font-size: 1rem;
  color: var(--less-light)
}

h3:before {
  content: "【h3】";
  font-size: 1rem;
  color: var(--less-light)
}

h4:before {
  content: "【h4】";
  font-size: 1rem;
  color: var(--less-light)
}

h5:before {
  content: "【h5】";
  font-size: 1rem;
  color: var(--less-light)
}

h6:before {
  content: "【h6】";
  font-size: 1rem;
  color: var(--less-light)
}

h1.section {
  text-align: center;
  margin-top: 3rem !important;
}

h1.chapter {
  color: green;
}

h2.sutta-title {
  color: purple;
}

.sutta-number {
  font-size: 1rem;
  color: white;
  background-color: black;
}

header ul {
  display: none;
}

.hide-content p,
.hide-content ol {
  display: none;
}

.hide-content span {
  display: inline !important;
}

.hide-content h1,
.hide-content h2,
.hide-content h3,
.hide-content h4,
.hide-content h5,
.hide-content h6 {
  margin-top: 0rem;
  margin-bottom: 0rem;
  font-size: 1rem;
}

.hide-content h2 {
  margin-left: 1rem;
}

.hide-content h3 {
  margin-left: 2rem;
  color: gray;
}

.hide-content h4 {
  margin-left: 3rem;
  color: gray;
}

.hide-content h5 {
  margin-left: 4rem;
  color: gray;
}

.hide-content h6 {
  margin-left: 5rem;
  color: gray;
}

.hide-content h1.chapter {
  margin-top: 1rem !important;
}

@media only screen and (max-width: 500px) {
  .hide-mobile {
    display: none;
  }

  #row-one,
  #row-two {
    column-gap: .5rem;
    row-gap: 0.5rem;
  }
}


.sutta-table {
  max-width: 1000px;
  margin: auto;
  padding: 1rem;
}

.hidden {
  display: none;
}



/* Footer links area */

.links-area {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  padding: .5rem 0rem;
  background-color: var(--dark);
  width: 100vw;
  margin-top: auto
}

.links-area a {
  position: relative;
  top: 0;
  transition: all ease 0.5s;
  filter: brightness(100%);
}

.links-area a:hover {
  top: -3px;
  filter: brightness(130%);
}

a.labs {
  rotate: 0deg;
  transition: rotate ease 1s;
}

a.labs:hover {
  rotate: 55deg;
  top: 0px !important;
}