@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
@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%;
}

@font-face {
  font-family: "Tilt Neon", sans-serif;
}
a {
  text-decoration: none;
  color: #EEEEEE;
}

.banner {
  overflow: hidden;
  position: relative;
  display: flex;
  height: 400px;
  width: 100%;
  min-height: fit-content;
  align-items: center;
  justify-content: space-evenly;
}
.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%);
}
.banner .profile-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 180px;
  padding: 10px;
}
.banner .profile-header .filler {
  width: 20px;
}
.banner .profile-header .username-ctn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(5px + 0.7vw) calc(3px + 0.7vw) calc(5px + 0.7vw) 6.5vw;
  flex: 0 0 auto;
  background-color: #00ADB5;
  border-radius: calc(7px + 0.7vw);
  border: #EEEEEE calc(2px + 0.1vw) solid;
}
.banner .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(9px + 1.5vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.banner .profile-header .profile-avatar {
  position: absolute;
  width: calc(35px + 6vw);
  height: calc(35px + 6vw);
  left: -40px;
  border-radius: 50%;
  border: #EEEEEE calc(2px + 0.1vw) solid;
  overflow: hidden;
  z-index: 2;
}
.banner .profile-header .profile-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.banner .user-banner-btn-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: calc(22px + 1vw);
  z-index: 5;
}
.banner .user-banner-btn-container a {
  width: calc(25px + 7vw);
}
.banner .user-banner-btn-container a.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;
}
.banner .user-banner-btn-container a.profile-btn {
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 25px;
  background-color: #00ADB5;
  border-radius: 12px;
  cursor: pointer;
}
.banner .banner-text {
  display: flex;
  flex: 0 0 auto;
  width: 60%;
  max-width: 1300px;
  max-height: 90%;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1.1rem;
  padding: 10px 20px;
}
.banner .banner-text .banner-title {
  position: relative;
  height: fit-content;
  width: 85%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: 30px;
  text-align: center;
}
.banner .banner-text div.banner-description {
  position: relative;
  height: 65%;
  overflow-y: auto;
  scrollbar-width: none;
  width: 85%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(13px + 0.3vw);
  text-align: justify;
}
.banner .banner-text .tags {
  position: relative;
  display: flex;
  width: 90%;
  height: fit-content;
  align-items: center;
  justify-content: center;
  gap: calc(2px + 0.2vw) calc(5px + 0.3vw);
  flex-wrap: wrap;
}
.banner .banner-text .tags .banner-tag {
  display: flex;
  padding: calc(2px + 0.1vw) calc(5px + 0.2vw);
  flex: 0 0 auto;
  background-color: #393E46;
  border-radius: calc(3px + 0.2vw);
  align-items: center;
}
.banner .banner-text .tags .banner-tag .banner-tag-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(9px + 0.3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.banner .banner-text .banner-buttons {
  display: flex;
  width: 500px;
  height: fit-content;
  justify-content: center;
  gap: 30px;
  align-items: center;
  position: relative;
}
.banner .banner-text .banner-buttons a .read-btn, .banner .banner-text .banner-buttons a .info-btn {
  display: flex;
  width: 125px;
  align-items: center;
  justify-content: center;
  gap: calc(8px + 0.3vw);
  padding: calc(3px + 0.3vw) calc(8px + 0.3vw);
  position: relative;
  align-self: stretch;
  border-radius: calc(8px + 0.3vw);
  overflow: hidden;
}
.banner .banner-text .banner-buttons a .info-btn {
  background-color: #222831;
}
.banner .banner-text .banner-buttons a .read-btn {
  background-color: #00ADB5;
}
.banner .banner-text .banner-buttons .banner-btn-text {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(15px + 0.3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.banner .banner-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(160px + 12vw);
  aspect-ratio: 12/16;
  margin-right: 5%;
  padding: calc(7px + 0.3vw);
  border-radius: calc(7px + 0.3vw);
  transform: rotate(12deg);
  background-color: #EEEEEE;
  box-shadow: 0 12px 12px 7px rgba(0, 0, 0, 0.2509803922);
}
.banner .banner-card img.banner-cover {
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
  border-radius: calc(3px + 0.2vw);
}

.category {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: calc(10px + 0.3vw);
}
.category .category-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(10px + 0.3vw);
  width: calc(100% - 6rem);
  padding: 0 3rem;
}
.category .category-title .category-title-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(26px + 1vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.category .category-title .category-title-link {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #00ADB5;
  font-size: calc(13px + 0.7vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  transition: color 100ms ease-in 100ms;
}
.category .category-title .category-title-link:hover {
  color: #EEEEEE;
}
.category .principal-list {
  overflow: clip;
  flex-wrap: nowrap;
}
.category .list-wrap {
  flex-wrap: wrap;
  justify-content: center;
}
.category .category-list {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  padding: 0 1rem;
  width: calc(100% - 2rem);
}
.category .category-list .category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px + 0.3vw);
  width: clamp(190px, 15%, 340px);
  height: max-content;
  flex-shrink: 0;
}
.category .category-list .category-card .category-card-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  aspect-ratio: 12/16;
  padding: calc(8px + 0.3vw) 0;
  border-radius: calc(12px + 0.3vw);
  background-color: #EEEEEE;
  box-shadow: 0 7px 7px 5px rgba(0, 0, 0, 0.2509803922);
}
.category .category-list .category-card .category-card-cover .category-card-img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: calc(12px + 0.3vw);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter ease-in 200ms;
}
.category .category-list .category-card .category-card-cover .category-card-hover {
  display: none;
}
.category .category-list .category-card .category-card-cover .hover-description {
  display: none;
}
.category .category-list .category-card .category-card-cover .hover-tags {
  display: none;
}
.category .category-list .category-card .category-card-cover .hover-buttons {
  display: none;
}
.category .category-list .category-card .category-card-cover:hover {
  overflow: hidden;
}
.category .category-list .category-card .category-card-cover:hover .category-card-img {
  filter: blur(8px) grayscale(20%) brightness(60%);
}
.category .category-list .category-card .category-card-cover:hover .category-card-hover {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 10%;
  min-height: calc(2.2rem + 0.3vw);
  border-radius: calc(12px + 0.3vw) calc(12px + 0.3vw) 0 0;
  top: 0;
  left: 0;
  background-color: #00ADB5;
}
.category .category-list .category-card .category-card-cover:hover .hover-description {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 90%;
  height: 60%;
  color: #EEEEEE;
  z-index: 10;
  font-family: "Tilt Neon", sans-serif;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .set-banner-btn {
  position: absolute;
  top: 0;
  left: 3px;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .set-banner {
  width: calc(18px + 0.4vw);
  height: calc(18px + 0.4vw);
  cursor: pointer;
  z-index: 5;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .set-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .favorite-btn {
  position: absolute;
  top: 0;
  right: 3px;
  z-index: 5;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .add-favorite,
.category .category-list .category-card .category-card-cover:hover .hover-description .delete-favorite {
  width: calc(18px + 0.4vw);
  height: calc(18px + 0.4vw);
  cursor: pointer;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .add-favorite img,
.category .category-list .category-card .category-card-cover:hover .hover-description .delete-favorite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.category .category-list .category-card .category-card-cover:hover .hover-description .description-title {
  text-align: center;
  font-size: clamp(16px, 15px + 0.4vw, 3rem);
}
.category .category-list .category-card .category-card-cover:hover .hover-description .description-ctn {
  text-align: justify;
  font-size: clamp(10px, 8px + 0.3vw, 1.8rem);
  overflow-y: auto;
  scrollbar-width: none;
  overflow-wrap: anywhere;
}
.category .category-list .category-card .category-card-cover:hover .hover-tags {
  z-index: 10;
  display: flex;
  width: 90%;
  height: 15%;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  flex-wrap: wrap;
  overflow-y: auto;
  scrollbar-width: none;
}
.category .category-list .category-card .category-card-cover:hover .hover-tags a {
  margin: 0;
  padding: 0;
}
.category .category-list .category-card .category-card-cover:hover .hover-tags a .hover-tag {
  display: flex;
  gap: calc(3px + 0.3vw);
  padding: calc(1px + 0.1vw) calc(2px + 0.2vw);
  flex: 0 0 auto;
  background-color: #393E46;
  border-radius: calc(2px + 0.2vw);
  align-items: center;
}
.category .category-list .category-card .category-card-cover:hover .hover-tags a .hover-tag .hover-tag-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: clamp(10px, 8px + 0.3vw, 1.6rem);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.category .category-list .category-card .category-card-cover:hover .hover-buttons {
  z-index: 10;
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3% + 1.1vw, 3rem);
  font-family: "Tilt Neon", sans-serif;
}
.category .category-list .category-card .category-card-cover:hover .hover-buttons a {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(2px + 0.2vw) calc(8px + 0.3vw);
  border-radius: calc(4px + 0.2vw);
}
.category .category-list .category-card .category-card-cover:hover .hover-buttons a span.hover-btn-text {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: clamp(12px, 10px + 0.3vw, 2rem);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.category .category-list .category-card .category-card-cover:hover .hover-buttons .hover-btn-read {
  background-color: #00ADB5;
}
.category .category-list .category-card .category-card-cover:hover .hover-buttons .hover-btn-info {
  background-color: #222831;
}
.category .category-list .category-card .category-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.category .category-list .category-card .category-card-info .category-card-title {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(15px + 0.3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
.category .message {
  width: 100%;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #7D0A0A;
  font-size: calc(14px + 1.2vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.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;
}

.sorting {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(10px + 0.5vw);
  width: 95%;
  padding: calc(5px + 0.4vw);
}
.sorting .sort-title {
  width: 100px;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(12px + 0.4vw);
  letter-spacing: 0;
  line-height: normal;
}
.sorting .sort-tag {
  display: flex;
  align-items: flex-start;
  gap: calc(4px + 0.3vw);
  padding: calc(2px + 0.2vw) calc(4px + 0.3vw);
  border-radius: 8px;
  background-color: #393E46;
}
.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: calc(14px + 0.4vw);
  letter-spacing: 0;
  line-height: normal;
}
.sorting .selected {
  background-color: #00ADB5;
}

form.searchform {
  display: flex;
  flex-direction: column;
  width: 90%;
}
form.searchform .search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(12px + 0.6vw);
}
form.searchform .search-top .searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(3px + 0.2vw) calc(5px + 0.3vw);
  border-radius: calc(12px + 0.3vw);
  border: 3px solid #EEEEEE;
  width: 80%;
  min-width: 7rem;
  height: fit-content;
  gap: calc(12px + 0.5vw);
}
form.searchform .search-top .searchbar label {
  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;
}
form.searchform .search-top .searchbar input#title {
  flex-grow: 1;
  color: #EEEEEE;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  font-size: calc(13px + 0.4vw);
  letter-spacing: 0;
  line-height: normal;
}
form.searchform .search-top .searchbar input#q.search-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #EEEEEE;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  font-size: calc(12px + 0.4vw);
  letter-spacing: 0;
  line-height: normal;
  padding: calc(3px + 0.2vw) calc(8px + 0.3vw);
  border-radius: calc(5px + 0.2vw);
  background-color: #00ADB5;
  cursor: pointer;
}
form.searchform .search-top .advanced-search-header {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: calc(15px + 0.8vw);
}
form.searchform .search-top .advanced-search-header .expand-btn {
  width: 1.7rem;
  height: 1.7rem;
  cursor: pointer;
}
form.searchform .search-top .advanced-search-header .expand-btn img#arrow-logo {
  object-position: center;
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  transition: transform 300ms ease-in-out;
}
form.searchform .search-top .advanced-search-header .expand-btn .up {
  transform: rotate(180deg);
}
form.searchform .search-top .advanced-search-header button.reset-btn {
  padding: calc(2px + 0.2vw) calc(4px + 0.3vw);
  border-radius: calc(3px + 0.3vw);
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(16px + 0.3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  background-color: #7D0A0A;
  cursor: pointer;
}
form.searchform #advanced-search {
  position: relative;
  transition: height 700ms ease 100ms;
}
form.searchform #advanced-search .advanced-search-ctn {
  height: 100%;
  width: 100%;
  bottom: 0;
}
form.searchform #advanced-search span.search-tag-title {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(11px + 0.6vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
form.searchform #advanced-search .search-tag-list {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  gap: calc(2px + 0.3vw);
  flex-wrap: wrap;
  margin: calc(10px + 0.6vw) 0;
}
form.searchform #advanced-search .search-tag-list .search-tag,
form.searchform #advanced-search .search-tag-list .search-tag-simple {
  display: flex;
  padding: calc(2px + 0.2vw) calc(4px + 0.3vw);
  background-color: #393E46;
  border-radius: calc(2px + 0.2vw);
  align-items: center;
  cursor: pointer;
}
form.searchform #advanced-search .search-tag-list .search-tag span.search-tag-txt,
form.searchform #advanced-search .search-tag-list .search-tag-simple span.search-tag-txt {
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  font-size: calc(14px + 0.3vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}
form.searchform #advanced-search .search-tag-list .selected {
  background-color: #00ADB5;
}
form.searchform #advanced-search .search-tag-list .unselected {
  background-color: #7D0A0A;
}
form.searchform .shrink {
  height: 0;
  overflow: hidden;
}
form.searchform .expand {
  height: calc(710px + 3vw);
  overflow: hidden;
}

.message-ctn {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.message-ctn .message {
  margin-top: 7%;
  width: fit-content;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  color: #7D0A0A;
  font-size: calc(14px + 1.2vw);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.hidden-form {
  position: absolute;
  visibility: hidden;
}
.hidden-form * {
  visibility: hidden;
}

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