@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%;
}

.about {
  width: 85%;
}
.about * {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(11px + 0.5vw);
  letter-spacing: 0;
  line-height: normal;
  text-align: justify;
}
.about h1 {
  text-align: center;
  font-size: calc(20px + 1.5vw);
}
.about h2 {
  font-size: calc(16px + 1vw);
}
.about h3 {
  font-size: calc(16px + 0.8vw);
}
.about h4 {
  font-size: calc(16px + 0.6vw);
}
.about .api-link {
  text-align: center;
}
.about .api-link a {
  transition: color 100ms ease-in 50ms;
  color: #EEEEEE;
  font-size: calc(12px + 0.6vw);
}
.about .api-link a:hover {
  color: #00ADB5;
}
.about img {
  min-width: 60%;
  width: 1440px;
  max-width: 100%;
}
.about .line {
  width: 100%;
  height: 5px;
  margin: calc(20px + 1.5vw) auto;
  background-color: #EEEEEE;
  border-radius: 3px;
}
.about .contact {
  width: 100%;
  display: flex;
  justify-content: center;
}
.about .contact ul {
  width: 30%;
  min-width: max-content;
  padding: calc(10px + 0.5vw) calc(18px + 0.7vw);
  border: 3px solid #EEEEEE;
  border-radius: calc(8px + 0.3vw);
}
.about .contact ul .list-title {
  width: 100%;
  padding: 0 0 15px 0;
  text-align: center;
  font-size: calc(14px + 0.6vw);
}
.about .contact ul li a {
  transition: color 100ms ease-in 50ms;
}
.about .contact ul li a:hover {
  color: #00ADB5;
}

.pagination {
  display: flex;
  justify-content: space-between;
  width: 50%;
  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: #7D0A0A;
  transition: none;
}
.pagination span.page-link:hover {
  color: #7D0A0A;
}

h2.chapter-scan-manga-title,
h3.chapter-scan-title {
  width: 100%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

h2.chapter-scan-manga-title {
  font-size: calc(22px + 1.2vw);
}

h3.chapter-scan-title {
  font-size: calc(20px + 1vw);
}

.chapter-scan-list {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: fit-content;
}
.chapter-scan-list img.chapter-scan {
  object-fit: contain;
}
.chapter-scan-list .pagination {
  width: calc(100% - 40px);
}

@media screen and (max-width: 1080px) {
  .chapter-scan-list {
    width: 80%;
  }
}
@media screen and (max-width: 550px) {
  .chapter-scan-list {
    width: 100%;
  }
}
.tags-title {
  width: 90%;
  height: fit-content;
  margin-top: 3rem;
}
.tags-title .tags-title-text {
  padding-left: 3rem;
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(26px + 1vw);
  letter-spacing: 0;
  line-height: normal;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 90%;
  height: fit-content;
}
.tags .tag {
  width: fit-content;
  height: fit-content;
  padding: calc(10px + 1vw) calc(20px + 1vw);
  border-radius: calc(10px + 0.3vw);
  background-color: #393E46;
  transition: background-color ease-in-out 300ms;
}
.tags .tag .tag-name {
  width: max-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(10px + 1vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.tags .tag:hover {
  background-color: #00ADB5;
}

.ctn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 30px;
}
.ctn .error-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 25%;
}
.ctn .error-txt .text-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.ctn .error-txt .text-container .text-wrapper {
  width: max-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(24px + 3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.ctn .error-txt .text-container .div {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(24px + 3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.ctn .error-img {
  width: 30vw;
  height: 60vh;
  box-shadow: inset 0px -12px 35px 25px #222831, inset 0px 0px 5px #222831;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.ctn .error-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 35%;
}
.ctn .error-info p.p {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(24px + 3vw);
  text-align: left;
  letter-spacing: 0;
  line-height: calc(42px + 5vw);
}
.ctn .confirm-ctn-left {
  width: 30%;
  height: 75vh;
}
.ctn .confirm-ctn-left .text-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.ctn .confirm-ctn-left .text-container .confirm-msg {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(24px + 3vw);
  text-align: left;
  letter-spacing: 0;
  line-height: calc(42px + 5vw);
}
.ctn .confirm-ctn-left .text-container .confirm-btn {
  width: 100%;
  padding: calc(10px + 0.5vw) calc(15px + 0.7vw);
  background-color: #00ADB5;
  border-radius: calc(10px + 0.5vw);
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(24px + 3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.ctn .confirm-img {
  width: 30%;
  height: 75vh;
}
.ctn .confirm-img img {
  width: 100%;
  height: 100%;
  object-position: top;
  object-fit: contain;
  mask-image: linear-gradient(to top, black, rgba(0, 0, 0, 0) 100%);
}
.ctn .confirm-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10%;
  width: 30%;
  height: 75vh;
}
.ctn .confirm-info .txt-1, .ctn .confirm-info .txt-2 {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #00ADB5;
  font-size: calc(32px + 3vw);
  letter-spacing: 0;
  line-height: calc(42px + 5vw);
}
.ctn .confirm-info .txt-1 {
  text-align: left;
}
.ctn .confirm-info .txt-2 {
  text-align: right;
}

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