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

.credentials-ctn {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: max(400px + 13vw, 50vh);
  min-height: fit-content;
  margin: 75px 0;
}
.credentials-ctn div.around-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(20px + 0.5vw) 0;
  z-index: 3;
}
.credentials-ctn div.around-form div.img-filler {
  width: 100%;
}
.credentials-ctn div.around-form div.form-img-ctn img.form-img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
.credentials-ctn div.before-img {
  justify-content: flex-start;
  align-items: flex-end;
}
.credentials-ctn div.before-img div.img-filler {
  height: 57%;
}
.credentials-ctn div.before-img div.form-img-ctn {
  height: 43%;
}
.credentials-ctn div.after-img {
  justify-content: flex-end;
}
.credentials-ctn div.after-img div.img-filler {
  height: 50%;
}
.credentials-ctn div.after-img div.form-img-ctn {
  height: 50%;
}
.credentials-ctn form.credentials-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(12px + 0.5vw);
  align-items: center;
  height: 100%;
  width: fit-content;
  min-width: 15vw;
  border: 3px #EEEEEE solid;
  border-radius: 20px;
  padding: calc(12px + 0.5vw) 4%;
  box-shadow: 0 12px 12px 7px rgba(0, 0, 0, 0.2509803922);
}
.credentials-ctn form.credentials-form .credentials-title {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #EEEEEE;
  font-size: calc(20px + 0.6vw);
  margin: calc(10px + 0.6vw) 0 calc(20px + 1.2vw) 0;
}
.credentials-ctn form.credentials-form .message {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #7D0A0A;
  font-size: calc(12px + 0.4vw);
}
.credentials-ctn form.credentials-form .form-main-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px + 0.3vw);
  width: 100%;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  margin: calc(5px + 0.2vw) 0;
  width: 100%;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #EEEEEE solid;
  display: block;
  width: 100%;
  padding: calc(10px + 0.4vw) 0;
  font-size: calc(12px + 0.4vw);
  color: #EEEEEE;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input:focus, .credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input:user-valid {
  outline: 0;
  border-bottom-color: #00ADB5;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input:focus + label.form-label span.label-text, .credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input:user-valid + label.form-label span.label-text {
  color: #00ADB5;
  transform: translateY(-30px);
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.label-text {
  display: inline-block;
  font-size: calc(14px + 0.4vw);
  min-width: 5px;
  color: #EEEEEE;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-1 {
  transition-delay: 0ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-2 {
  transition-delay: 50ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-3 {
  transition-delay: 100ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-4 {
  transition-delay: 150ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-5 {
  transition-delay: 200ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-6 {
  transition-delay: 250ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-7 {
  transition-delay: 300ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-8 {
  transition-delay: 350ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-9 {
  transition-delay: 400ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-10 {
  transition-delay: 450ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-11 {
  transition-delay: 550ms;
}
.credentials-ctn form.credentials-form .form-main-ctn .form-control input.form-input + label.form-label span.input-letter-12 {
  transition-delay: 600ms;
}
.credentials-ctn form.credentials-form .form-main-ctn div.forgot-passwd-msg-ctn {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.credentials-ctn form.credentials-form .form-main-ctn div.forgot-passwd-msg-ctn a.forgot-passwd-msg {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #00ADB5;
  font-size: calc(9px + 0.3vw);
}
.credentials-ctn form.credentials-form .form-main-ctn div.forgot-passwd-msg-ctn a.forgot-passwd-msg:hover {
  color: #EEEEEE;
}
.credentials-ctn form.credentials-form button.form-btn {
  width: 100%;
  padding: calc(3px + 0.3vw) 0;
  background-color: #00ADB5;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #EEEEEE;
  font-size: calc(14px + 0.4vw);
  border-radius: calc(8px + 0.3vw);
  margin: calc(10px + 0.6vw) 0;
}
.credentials-ctn form.credentials-form a.credentials-cancel-btn {
  width: 100%;
  padding: calc(3px + 0.3vw) 0;
  background-color: #7D0A0A;
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
  color: #EEEEEE;
  font-size: calc(14px + 0.4vw);
  border-radius: calc(8px + 0.3vw);
  margin: calc(10px + 0.6vw) 0;
}
.credentials-ctn form.credentials-form div.alternate-msg-ctn {
  display: flex;
  justify-content: space-between;
  gap: calc(14px + 0.4vw);
  width: 100%;
  margin-bottom: calc(18px + 0.6vw);
}
.credentials-ctn form.credentials-form div.alternate-msg-ctn span.alternate-msg {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #EEEEEE;
  font-size: calc(10px + 0.4vw);
}
.credentials-ctn form.credentials-form div.alternate-msg-ctn a.alternate-link {
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #00ADB5;
  font-size: calc(10px + 0.4vw);
}
.credentials-ctn form.credentials-form div.alternate-msg-ctn a.alternate-link:hover {
  color: #EEEEEE;
}

.profile-form-ctn {
  height: calc(500px + 25vw);
}
.profile-form-ctn .profile-form {
  width: 70%;
}
.profile-form-ctn .profile-form .avatars-form {
  width: calc(100% - (5px + 0.3vw) * 2);
  height: calc(75px + 5vw);
  padding: 0 calc(5px + 0.3vw);
  margin-bottom: calc(60px + 2.2vw);
  font-family: "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: #EEEEEE;
  font-size: calc(15px + 0.4vw);
}
.profile-form-ctn .profile-form .avatars-form .avatar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(7px + 0.3vw);
  height: inherit;
  margin-top: calc(14px + 0.4vw);
  padding: calc(12px + 0.5vw) 0;
  overflow-y: auto;
  border-radius: 18px;
  background-color: #393E46;
}
.profile-form-ctn .profile-form .avatars-form .avatar-list .avatar-radio {
  position: absolute;
  height: 0;
  width: 0;
  visibility: hidden;
}
.profile-form-ctn .profile-form .avatars-form .avatar-list .avatar-choice {
  width: calc(45px + 1vw);
  height: calc(45px + 1vw);
  border-radius: 50%;
  overflow: hidden;
  border: none;
  box-sizing: border-box;
}
.profile-form-ctn .profile-form .avatars-form .avatar-list .avatar-choice img.avatar-choice-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.profile-form-ctn .profile-form .avatars-form .avatar-list .selected {
  border: #00ADB5 3px solid;
}
.profile-form-ctn .profile-form button.form-btn {
  max-width: 50%;
}

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