@import "./fonts.css";
@import './defaultStyles.css';
@import './absicons.css';

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea {
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

body {
  background-color: #262626;
}

.layout-wrapper {
  height: calc(100vh - env(safe-area-inset-top));
  min-height: calc(100vh - env(safe-area-inset-top));
  max-height: calc(100vh - env(safe-area-inset-top));
  margin-top: env(safe-area-inset-top);
}

#content {
  height: calc(100% - 64px);
  min-height: calc(100% - 64px);
  max-height: calc(100% - 64px);
}

#content.playerOpen {
  height: calc(100% - 184px);
  min-height: calc(100% - 184px);
  max-height: calc(100% - 184px);
}

#bookshelf {
  height: calc(100% - 48px);
  min-height: calc(100% - 48px);
}

.box-shadow-sm {
  box-shadow: 0px 3px 6px #11111170;
}

.box-shadow-md {
  box-shadow: 2px 8px 6px #111111aa;
}

.box-shadow-lg-up {
  box-shadow: 0px -12px 8px #111111ee;
}

.box-shadow-xl {
  box-shadow: 2px 14px 8px #111111aa;
}

.box-shadow-book {
  box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
}

.shadow-height {
  height: calc(100% - 4px);
}

.bookshelfRow {
  background-image: url(/wood_panels.jpg);
}

.bookshelfDivider {
  background: rgb(149, 119, 90);
  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
  box-shadow: 2px 10px 8px #1111117e;
}

.altBookshelfDivider {
  background: rgb(38 38 38);
  /*background: linear-gradient(180deg, rgba(191, 193, 195, 1) 0%, rgb(156, 158, 159) 17%, rgb(114, 115, 117) 88%, rgb(120, 120, 122) 100%);*/
  box-shadow: 2px 10px 8px #1111117e;
}

/*
Bookshelf Label
*/
.categoryPlacard {
  letter-spacing: 1px;
}

.shinyBlack {
  background-color: #2d3436;
  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
  border-color: rgba(255, 244, 182, 0.6);
  border-style: solid;
  color: #fce3a6;
}

.altBookshelfLabel {
  background-color: #2d3436;
  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
  border-color: rgb(255, 255, 255);
  border-style: solid;
  color: #ffffff;
}

.cover-bg {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  top: -20px;
  left: -20px;
  background-size: 100% 100%;
  background-position: center;
  opacity: 1;
  filter: blur(20px);
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}