@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
@font-face {
  font-family: "Tilt Neon", sans-serif;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(238, 238, 238, 0.2) #222831;
}
* a {
  text-decoration: none;
  color: #EEEEEE;
}
* input {
  outline: none;
  background: none;
  border: none;
}
* input:focus, * input:focus-visible, * input:focus-within {
  outline: none;
  background: none;
  border: none;
}
* button {
  border: none;
  background: none;
}

body {
  background-color: #222831;
  scrollbar-width: none;
}

.header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 0;
  overflow-x: hidden;
}
.header .main {
  justify-content: space-between;
  width: 90%;
  display: flex;
  align-items: center;
  padding: 16px 0;
}
.header .main .logo-link {
  flex: 1 1 auto;
  width: 30%;
  height: fit-content;
}
.header .main .header-nav {
  display: flex;
  flex: 1 0 content;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 8%, 3rem);
  padding: 0 calc(8px + 0.3vw);
  width: 30%;
}
.header .main .header-nav .category-link {
  width: max-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(15px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 100ms;
}
.header .main .header-nav .category-link:hover {
  color: #00ADB5;
}
.header .main .header-search-bar-ctn {
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
  width: 30%;
}
.header .main .header-search-bar-ctn form.header-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(3px + 0.2vw);
  border-radius: calc(12px + 0.3vw);
  border: 3px solid #EEEEEE;
  width: 60%;
  min-width: 7rem;
  height: fit-content;
}
.header .main .header-search-bar-ctn form.header-search-bar .filter-search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: fit-content;
  padding: calc(4px + 0.2vw);
  background-color: #393E46;
  border-radius: calc(5px + 0.3vw);
  cursor: pointer;
  transition: background-color 150ms ease-in;
}
.header .main .header-search-bar-ctn form.header-search-bar .filter-search-bar:hover {
  background-color: #00ADB5;
}
.header .main .header-search-bar-ctn form.header-search-bar .filter-search-bar .filter-search-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(10px + 0.5vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  padding: 0 calc(2px + 0.2vw);
}
.header .main .header-search-bar-ctn form.header-search-bar .search-bar-input {
  width: 60%;
  flex-shrink: 1;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(10px + 0.5vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  padding: 0 calc(2px + 0.2vw);
}
.header .main .header-search-bar-ctn form.header-search-bar .search-bar-btn {
  cursor: pointer;
}
.header .main .header-search-bar-ctn form.header-search-bar .search-bar-btn .icon-search {
  height: calc(18px + 0.6vw);
  width: calc(18px + 0.6vw);
}
.header .variable {
  width: 89%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  gap: 2rem;
  padding: 16px 0;
}
.header .variable .header-buttons {
  height: calc(25px + 0.5vw);
  display: flex;
  align-items: center;
  flex: 1;
  gap: calc(20px + 1vw);
}
.header .variable .header-buttons .login-btn, .header .variable .header-buttons .register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: calc(8px + 0.3vw);
  padding: calc(6px + 0.3vw) calc(20px + 0.5vw);
  border-radius: calc(9px + 0.3vw);
  cursor: pointer;
}
.header .variable .header-buttons .login-btn {
  background-color: #00ADB5;
}
.header .variable .header-buttons .register-btn {
  background-color: #393E46;
}
.header .variable .filler {
  display: flex;
  flex: 1;
}
.header .variable .header-msg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(12px + 0.4vw);
  width: fit-content;
  align-items: center;
  position: relative;
}
.header .variable .header-msg .line-top {
  width: 174px;
  position: relative;
  height: 2px;
}
.header .variable .header-msg .invitation-msg {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #00ADB5;
  font-size: calc(13px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 100ms;
}
.header .variable .header-msg .invitation-msg:hover {
  color: #EEEEEE;
}
.header .variable .header-msg .line-bottom {
  width: 237px;
  position: relative;
  height: 2px;
}
.header .variable .profile-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 90px;
  padding: 10px;
}
.header .variable .profile-header .filler {
  width: 20px;
}
.header .variable .profile-header .username-ctn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 15px 5px 60px;
  flex: 0 0 auto;
  background-color: #00ADB5;
  border-radius: 12px;
  border: #EEEEEE 2px solid;
}
.header .variable .profile-header .username-ctn .username-txt {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #222831;
  font-size: calc(15px + 0.5vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.header .variable .profile-header .profile-avatar {
  position: absolute;
  width: 75px;
  height: 75px;
  left: -20px;
  border-radius: 50%;
  border: #EEEEEE 3px solid;
  overflow: hidden;
  z-index: 2;
}
.header .variable .profile-header .profile-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.header .variable .logout-btn {
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 25px;
  background-color: #7D0A0A;
  border-radius: 12px;
  cursor: pointer;
}

.header-btn-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(12px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.logo {
  display: flex;
  flex: 1;
  object-position: left;
  object-fit: contain;
  height: clamp(1.7rem, 25px + 1.5vw, 60px);
}

.template {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  align-items: center;
  gap: 50px;
  position: relative;
  background-color: #222831;
  margin-bottom: 150px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(2rem + 1vw);
  width: calc(100% - (13px + 0.4vw) * 2);
  height: calc(7rem + 10vw);
  padding: calc(13px + 0.4vw);
  background-color: transparent;
}
.footer .footer-nav-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px + 0.3vw);
  padding: calc(15px + 0.4vw) 0;
  width: 40%;
}
.footer .footer-nav-credits .logo-ctn {
  display: flex;
  justify-content: center;
  width: 45%;
}
.footer .footer-nav-credits .logo-ctn .logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.footer .footer-nav-credits .footer-nav {
  display: flex;
  align-items: center;
  gap: calc(8px + 0.5vw);
}
.footer .footer-nav-credits .footer-nav .footer-nav-text {
  width: fit-content;
  height: calc(15px + 0.4vw);
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(13px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 50ms;
}
.footer .footer-nav-credits .footer-nav .footer-nav-text:hover {
  color: #00ADB5;
}
.footer .footer-nav-credits .credits {
  width: 90%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(11px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.footer .footer-nav-credits .credits .credits-link {
  color: #00ADB5;
  transition: color 100ms ease-in 100ms;
}
.footer .footer-nav-credits .credits .credits-link:hover {
  color: #EEEEEE;
}
.footer .footer-nav-credits .copyright {
  width: 70%;
  height: 20px;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(11px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.footer .footer-nav-credits .copyright-link {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #00ADB5;
  font-size: calc(11px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 100ms;
}
.footer .footer-nav-credits .copyright-link:hover {
  color: #EEEEEE;
}
.footer .footer-img-reading {
  height: 100%;
  width: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.manga-presentation {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 75px;
}
.manga-presentation .manga-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 400px;
}
.manga-presentation .manga-banner img.background-img {
  position: absolute;
  width: 100%;
  height: inherit;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  filter: blur(8px) grayscale(20%) brightness(50%);
}
.manga-presentation .manga-banner .banner-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 60%;
  height: calc(100% - 24px);
  z-index: 2;
}
.manga-presentation .manga-banner .banner-text .manga-title {
  width: 90%;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(25px + 1.5vw);
  letter-spacing: 0;
  line-height: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.manga-presentation .manga-banner .banner-text .manga-attributes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1rem + 1vw);
  width: 100%;
  padding: calc(8px + 0.4vw);
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(8px + 0.4vw);
  padding: calc(8px + 0.4vw);
  border-radius: calc(5px + 0.4vw);
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute .attribute-label {
  width: fit-content;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(1rem + 1vw);
  letter-spacing: 0;
  line-height: normal;
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute .rating-tag {
  display: flex;
  gap: calc(3px + 0.3vw);
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute .rating-tag img.icon-star-outline {
  width: calc(1rem + 1vw);
  height: calc(1rem + 1vw);
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute .div-attr-ctn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px + 0.4vw);
  padding: calc(3px + 0.2vw) calc(8px + 0.4vw);
  border-radius: calc(5px + 0.4vw);
}
.manga-presentation .manga-banner .banner-text .manga-attributes .attribute .attr-text {
  width: fit-content;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(14px + 0.8vw);
  letter-spacing: 0;
  line-height: normal;
}
.manga-presentation .manga-banner .banner-text .manga-read-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8px + 0.4vw);
  padding: calc(3px + 0.3vw) calc(12px + 0.6vw);
  background-color: #00ADB5;
  border-radius: calc(8px + 0.5vw);
}
.manga-presentation .manga-banner .banner-text .manga-read-btn .manga-read-btn-text {
  width: fit-content;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(14px + 0.8vw);
  letter-spacing: 0;
  line-height: normal;
}
.manga-presentation .manga-banner .banner-text .manga-read-btn img.icon-menu-book {
  width: calc(1rem + 1vw);
  height: calc(1rem + 1vw);
}
.manga-presentation .manga-banner .favorite-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  margin: calc(3px + 0.3vw) calc(3px + 0.3vw) 0 0;
}
.manga-presentation .manga-banner .add-favorite,
.manga-presentation .manga-banner .delete-favorite {
  width: calc(1.6rem + 2vw);
  height: calc(1.6rem + 2vw);
  cursor: pointer;
}
.manga-presentation .manga-banner .add-favorite img,
.manga-presentation .manga-banner .delete-favorite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.manga-presentation .manga-card-ctn-abs {
  position: absolute;
  top: calc(1.5rem + 1.5vw);
  right: calc(1rem + 2.5vw);
  width: calc(100% - (1.5rem + 1.5vw) * 2);
  height: 500px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(8px + 0.4vw);
  padding: 0 calc(1.5rem + 1.5vw);
}
.manga-presentation .manga-card-ctn-abs .manga-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100px + 18vw);
  aspect-ratio: 12/16;
  padding: calc(10px + 0.5vw);
  border-radius: calc(7px + 0.4vw);
  transform: rotate(12deg);
  background-color: #EEEEEE;
  box-shadow: 0 12px 12px 7px rgba(0, 0, 0, 0.2509803922);
}
.manga-presentation .manga-card-ctn-abs .manga-card .manga-card-img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: calc(4px + 0.3vw);
}
.manga-presentation .manga-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8px + 0.4vw);
  height: fit-content;
  min-height: calc(0.75 * (150px + 18vw));
  z-index: 2;
}
.manga-presentation .manga-info .manga-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  padding: 0 calc(22px + 0.5vw);
}
.manga-presentation .manga-info .manga-description p {
  width: 100%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(14px + 0.4vw);
  text-align: justify;
}
.manga-presentation .manga-info .manga-description .manga-tag-list {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: center;
  gap: calc(2px + 0.2vw) calc(5px + 0.3vw);
  flex-wrap: wrap;
}
.manga-presentation .manga-info .manga-description .manga-tag-list .manga-tag {
  display: flex;
  padding: calc(3px + 0.2vw) calc(5px + 0.3vw);
  background-color: #393E46;
  border-radius: calc(3px + 0.2vw);
  align-items: center;
}
.manga-presentation .manga-info .manga-description .manga-tag-list .manga-tag .manga-tag-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(12px + 0.4vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.manga-chapters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(100% - 50px);
  padding: 10px 25px;
}
.manga-chapters .chapters-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.manga-chapters .chapters-header .title-ctn {
  display: flex;
  gap: 10px;
  padding: 0 10px;
  background-color: #393E46;
  border-radius: 12px 12px 0 0;
}
.manga-chapters .chapters-header .title-ctn .title {
  width: fit-content;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 30px;
  letter-spacing: 0;
  line-height: normal;
}
.manga-chapters .chapters-header .sorting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}
.manga-chapters .chapters-header .sorting .sort-title {
  width: 100px;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 18px;
  letter-spacing: 0;
  line-height: normal;
}
.manga-chapters .chapters-header .sorting .sort-tag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  background-color: #393E46;
}
.manga-chapters .chapters-header .sorting .sort-tag .sort-tag-text {
  width: fit-content;
  text-align: center;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}
.manga-chapters .chapters-header .sorting .selected {
  background-color: #00ADB5;
}
.manga-chapters .chapters-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: fit-content;
  max-height: 70vh;
  padding: 10px 0;
  border-radius: 0 12px 12px 12px;
  background-color: #393E46;
  overflow-y: auto;
  overflow-x: hidden;
}
.manga-chapters .chapters-list .chapter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  height: 50px;
  padding: 3px 20px;
}
.manga-chapters .chapters-list .chapter:nth-child(even) {
  background-color: rgba(238, 238, 238, 0.2);
}
.manga-chapters .chapters-list .chapter a.chapter-title {
  flex: 1 0 auto;
  width: 12vw;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 50ms;
  cursor: pointer;
}
.manga-chapters .chapters-list .chapter a.chapter-title:hover {
  color: #00ADB5;
}
.manga-chapters .chapters-list .chapter .source {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.manga-chapters .chapters-list .chapter .source img.icon-group {
  width: 37px;
  height: 37px;
}
.manga-chapters .chapters-list .chapter .source .source-name {
  width: 12vw;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 18px;
  letter-spacing: 0;
  line-height: normal;
}
.manga-chapters .chapters-list .chapter a.chapter-link {
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.manga-chapters .chapters-list .chapter a.chapter-link img.icon-menu-book {
  width: 44px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: fit-content;
  height: fit-content;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #393E46;
}
.pagination .page-link {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(14px + 0.5vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 50ms;
}
.pagination .page-link:hover {
  color: #00ADB5;
}
.pagination span.page-link {
  color: #00ADB5;
  transition: none;
}

/*# sourceMappingURL=manga.css.map */