@import "tailwindcss";
@import "./styles/virtualization.css";

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend/Lexend-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}

@font-face {
  font-family: "ComicNeue-Regular";
  src: url("/fonts/Comic_Neue/ComicNeue-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}

@font-face {
  font-family: "EBGaramond-Regular";
  src: url("/fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}

@font-face {
  font-family: "Baskervville";
  src: url("/fonts/Baskervville/Baskervville-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}

@theme {
  --font-sans: "Lexend", system-ui, -apple-system, sans-serif;
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-primary: oklch(0.16 0.02 262.62);
  --color-secondary: oklch(0.27 0.03 262.95);
  --color-tertiary: oklch(0.2319 0.0352 264.53);
  --color-quaternary: oklch(0.4736 0.1444 48.61);
  --color-input: oklch(0.3991 0.03 262.95);
  --color-background: oklch(0.95 0.01 262.62);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

.lexend {
  font-family: "Lexend", system-ui, -apple-system, sans-serif;
}

.baskervville {
  font-family: "Baskervville", system-ui, -apple-system, sans-serif;
}

.ebgaramond-regular {
  font-family: "EBGaramond-Regular", system-ui, -apple-system, sans-serif;
}

.comicneue-regular {
  font-family: "ComicNeue-Regular", system-ui, -apple-system, sans-serif;
}

/* Line clamp utility for text truncation */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body {
  background-color: var(--color-secondary);
  font-family: var(--font-sans);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
}

#manga-reader-mobile {
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}

#manga-reader-nav {
  position: absolute;
  top: env(safe-area-inset-top);
}

#manga-reader-footer {
  position: fixed;
  bottom: 0;
}

.manga-height {
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
}

.full-vh {
  height: 100vh;
}

iframe p {
  font-family: "Arial", "sans-serif" !important;
}

/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #446FA0 #000000;
}*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #000000;
}

*::-webkit-scrollbar-track:hover {
  background-color: #3e4142;
}

*::-webkit-scrollbar-track:active {
  background-color: #575a5b;
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #446fa0;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #558bc8;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #5c96d8;
}

.titlebar {
  height: 30px;
  background: #000000;
  color: #ffffff;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  user-select: none;
  -webkit-user-select: none;
}

.titlebar-button:hover {
  background: #5bbec3;
}
