@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 .header-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;
}
.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-img-reading {
  height: 100%;
  width: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

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