:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

html, body {
  background-color: #0d0d0f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.card-dark {
  background-color: #17171a;
  border: 1px solid #26262b;
}

.hide-scrollbar::-webkit-scrollbar { 
  display: none; 
}

.hide-scrollbar { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

#paginated-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  position: relative;
  touch-action: pan-x;
}

#book-column-track {
  box-sizing: border-box;
  column-fill: auto;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

#book-column-track p, 
#book-column-track div {
  margin-bottom: 0.85rem !important;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  break-inside: auto !important;
}

#book-column-track h1, 
#book-column-track h2, 
#book-column-track h3 {
  font-weight: 700 !important;
  margin-top: 0.85rem !important;
  margin-bottom: 0.45rem !important;
  break-after: avoid;
}

#book-column-track img {
  max-width: 100% !important;
  max-height: 40vh !important;
  object-fit: contain;
  border-radius: 8px;
  margin: 0.5rem auto;
  display: block;
  break-inside: avoid;
}

.theme-oled {
  background-color: #000000 !important;
  color: #d4d4d8 !important;
}
.theme-oled #book-column-track * { color: #d4d4d8 !important; }
.theme-oled h1, .theme-oled h2, .theme-oled h3 { color: #ffffff !important; }

.theme-sepia {
  background-color: #f6ecd9 !important;
  color: #5b4636 !important;
}
.theme-sepia #book-column-track * { color: #5b4636 !important; }
.theme-sepia h1, .theme-sepia h2, .theme-sepia h3 { color: #2e1e0f !important; }

.theme-slate {
  background-color: #1a1f2c !important;
  color: #cbd5e1 !important;
}
.theme-slate #book-column-track * { color: #cbd5e1 !important; }
.theme-slate h1, .theme-slate h2, .theme-slate h3 { color: #f8fafc !important; }

.reader-bar {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.reader-bar-hidden-top {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

.reader-bar-hidden-bottom {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}