html {
  scroll-behavior: smooth;
  height: 100vh;
  overflow: hidden;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}
*:focus {
  outline: none;
}

body {
  background-color: #fff;
  font-family: SfPro;
}

.signin {
  cursor: pointer;
  color: #ff00ef;
}

.change-mode {
  margin-top: 100px;
  font-size: 25px;
  font-weight: 700;
  color: #000;
}

button {
  cursor: pointer;
  font-size: 23px;
}

button:disabled {
  cursor: auto;
}

fieldset {
  border: none;
}









.loading {
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  justify-content: space-evenly;
  position: fixed;
  justify-content: center;
  --main: #3a4897;
  --accent: #80aada;
}

.socket {
  scale: 2.3;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
}

@media (max-width: 768px) {
  .socket {
    scale: 1.5;
  }
}

.hex-brick {
  box-shadow: 0px 0px 25px 0px var(--accent);
  scale: .5;
  background: --main;
  width: 30px;
  height: 17px;
  position: absolute;
  top: 5px;
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;

}

.h2 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.h3 {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}

.gel {
  height: 30px;
  width: 30px;
  transition: all .3s;
  -webkit-transition: all .3s;
  position: absolute;
  top: 50%;
  left: 50%;

}

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.c1 {
  margin-left: -47px;
  margin-top: -15px;
}

.c2 {
  margin-left: -31px;
  margin-top: -43px;
}

.c3 {
  margin-left: 1px;
  margin-top: -43px;
}

.c4 {
  margin-left: 17px;
  margin-top: -15px;
}

.c5 {
  margin-left: -31px;
  margin-top: 13px;
}

.c6 {
  margin-left: 1px;
  margin-top: 13px;
}

.c7 {
  margin-left: -63px;
  margin-top: -43px;
}

.c8 {
  margin-left: 33px;
  margin-top: -43px;
}

.c9 {
  margin-left: -15px;
  margin-top: 41px;
}

.c10 {
  margin-left: -63px;
  margin-top: 13px;
}

.c11 {
  margin-left: 33px;
  margin-top: 13px;
}

.c12 {
  margin-left: -15px;
  margin-top: -71px;
}

.c13 {
  margin-left: -47px;
  margin-top: -71px;
}

.c14 {
  margin-left: 17px;
  margin-top: -71px;
}

.c15 {
  margin-left: -47px;
  margin-top: 41px;
}

.c16 {
  margin-left: 17px;
  margin-top: 41px;
}

.c17 {
  margin-left: -79px;
  margin-top: -15px;
}

.c18 {
  margin-left: 49px;
  margin-top: -15px;
}

.c19 {
  margin-left: -63px;
  margin-top: -99px;
}

.c20 {
  margin-left: 33px;
  margin-top: -99px;
}

.c21 {
  margin-left: 1px;
  margin-top: -99px;
}

.c22 {
  margin-left: -31px;
  margin-top: -99px;
}

.c23 {
  margin-left: -63px;
  margin-top: 69px;
}

.c24 {
  margin-left: 33px;
  margin-top: 69px;
}

.c25 {
  margin-left: 1px;
  margin-top: 69px;
}

.c26 {
  margin-left: -31px;
  margin-top: 69px;
}

.c27 {
  margin-left: -79px;
  margin-top: -15px;
}

.c28 {
  margin-left: -95px;
  margin-top: -43px;
}

.c29 {
  margin-left: -95px;
  margin-top: 13px;
}

.c30 {
  margin-left: 49px;
  margin-top: 41px;
}

.c31 {
  margin-left: -79px;
  margin-top: -71px;
}

.c32 {
  margin-left: -111px;
  margin-top: -15px;
}

.c33 {
  margin-left: 65px;
  margin-top: -43px;
}

.c34 {
  margin-left: 65px;
  margin-top: 13px;
}

.c35 {
  margin-left: -79px;
  margin-top: 41px;
}

.c36 {
  margin-left: 49px;
  margin-top: -71px;
}

.c37 {
  margin-left: 81px;
  margin-top: -15px;
}

.r1 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

.r1>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3>.hex-brick {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

@keyframes pulse00 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade00 {
  0% {
    background: var(--accent);
  }

  50% {
    background: var(--accent);

  }

  100% {
    background: var(--accent);

  }
}








.banter-loader {
  transform: translateY(8px);
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: 0 155px 0 155px;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.5s ease;
}

.banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px #008cff56);
  background: #008cff;
  border-radius: 50%;
}

.banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.banter-loader__box:nth-child(1):before,
.banter-loader__box:nth-child(4):before {
  margin-left: 26px;
}

.banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

.banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(0px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 0px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(1) {
  animation: moveBox-1 4s infinite;
}

@keyframes moveBox-2 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 26px);
  }

  81.8181818182% {
    transform: translate(0px, 26px);
  }

  90.9090909091% {
    transform: translate(0px, 26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(2) {
  animation: moveBox-2 4s infinite;
}

@keyframes moveBox-3 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(-26px, 0);
  }

  54.5454545455% {
    transform: translate(-26px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(3) {
  animation: moveBox-3 4s infinite;
}

@keyframes moveBox-4 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, 0px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(4) {
  animation: moveBox-4 4s infinite;
}

@keyframes moveBox-5 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(0, 0);
  }

  27.2727272727% {
    transform: translate(0, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 0);
  }

  54.5454545455% {
    transform: translate(26px, 0);
  }

  63.6363636364% {
    transform: translate(26px, 0);
  }

  72.7272727273% {
    transform: translate(26px, 0);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(5) {
  animation: moveBox-5 4s infinite;
}

@keyframes moveBox-6 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(0px, 0);
  }

  72.7272727273% {
    transform: translate(0px, 26px);
  }

  81.8181818182% {
    transform: translate(-26px, 26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(6) {
  animation: moveBox-6 4s infinite;
}

@keyframes moveBox-7 {
  9.0909090909% {
    transform: translate(26px, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(26px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(7) {
  animation: moveBox-7 4s infinite;
}

@keyframes moveBox-8 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(8) {
  animation: moveBox-8 4s infinite;
}

@keyframes moveBox-9 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-52px, 0);
  }

  90.9090909091% {
    transform: translate(-26px, 0);
  }

  100% {
    transform: translate(0px, 0);
  }
}

.banter-loader__box:nth-child(9) {
  animation: moveBox-9 4s infinite;
}












.signUp-form {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.signUp-form form{
  text-align: center;
}

.signUp-form .signUp-img {
  height: 100%;
}

.signUp-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.signUp-content {
  max-width: 800px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(255, 255, 255);
}

.signUp-content h1 {
  font-size: 40px;
  font-family: title;
  text-transform: capitalize;
  margin-bottom: 30px;
}

.form-content {
  display: block;
}

.signUp-form-content {
  margin: 30px 0px;
  font-size: 20px;
}

.signUp-form-contents fieldset {
  margin-bottom: 20px;
}



/* Start of Input Error */
.signUp-errors {
  margin-top: 5px;
  border-radius: 12px;
  width: 800px;
  padding: 18px 20px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background-color: #cc0000;
  text-align: start;
}

.signUp-errors-INFO {
  width: 500px;
  margin-left: 150px;
}

.signUp-errors-INFO p {
  padding: 3px 0;
}

#signUpForm .has-error {
  border-color: #cc0000;
  border: 2px solid #cc0000;
  background-color: #cc000041;
}

/* End of Input Error */



.signUp-DOB {
  justify-content: start;
  align-items: start;
  text-align: start;
}

.signUp-form-content-label {
  text-transform: capitalize;
  color: #000;
  font-size: 23px;
  font-weight: 600;
}

.signUp-form-contents select {
  font-family: SfPro;
  width: 230px;
  height: 70px;
  font-size: 23px;
  border: 1px solid #c4c4c4;
  filter: drop-shadow(0 0 5px #c4c4c4);
  border-radius: 23px;
  border-width: 1px;
  padding: 5px 10px 10px 10px;
  margin: 15px;
  background-color: transparent;
  transition: filter 0.3s ease, border-color 0.3s ease;
}

.signUp-form-contents select:hover {
  border: 1px solid #858585;
}

.signUp-form-contents select:focus {
  border-color: #ff00ef;
}

#month {
  width: 250px;
  margin-left: 0;
}

.signUp-PLCT {
  display: none;
  text-align: start;
}

.LegalPolicy-copy {
  margin-bottom: 10px;
}

.Heading-heading {
  font-size: 23px;
  color: #a20097;
}

.LegalPolicy-policyList {
  margin-left: 40px;
  font-size: 25px;
}


.LegalPolicy-policyList li a {
  color: #000;
}

.LegalPolicy-policyList li a:focus {
  border: 2px solid #000;
}

.signUp-policyAccept {
  margin: 20px 0px 30px;
}

.signUp-policyAccept input[type="checkbox"] {
  opacity: 0;
  width: 0;
  position: absolute;
}

.signUp-policyAccept .signUp-policyAccept-label {
  cursor: pointer;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  justify-content: start;
  align-items: start;
  text-align: start;
  font-size: 23px;
}

.signUp-policyAccept-label-text {
  max-width: 740px;
}

.signUp-policyAccept .signUp-policyAccept-label .signUp-policyAccept-label-text {
  margin-left: 10px;
}

.signUp-policyAccept .checkbox-svg {
  width: 30px;
  height: 30px;
}

.signUp-policyAccept .checkbox-box-fade {
  stroke: #959595;
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
}

.signUp-policyAccept .checkbox-box-focus {
  stroke: #0037ff;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  -webkit-transition: stroke-dashoffset 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-in;
}

.signUp-policyAccept .checkbox-box {
  stroke: #ff00ef;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  -webkit-transition: stroke-dashoffset 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-in;
}

.signUp-policyAccept .checkbox-tick {
  stroke: #ff00ef;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  -webkit-transition: stroke-dashoffset 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-in;
}

.signUp-policyAccept input[type="checkbox"]:checked+.signUp-policyAccept-label .checkbox-box,
.signUp-policyAccept input[type="checkbox"]:checked+.signUp-policyAccept-label .checkbox-tick {
  stroke-dashoffset: 0;
}

.signUp-policyAccept input[type="checkbox"]:focus+.signUp-policyAccept-label .checkbox-box-focus {
  stroke-dashoffset: 0;
}

.signUp-INFO {
  position: relative;
  display: none;
}
.signUp-INFO-content{
  max-height: 70vh;
  overflow-y: auto;
}
.signUp-INFO-content input {
  position: relative;
  width: 500px;
  height: 70px;
  border-radius: 23px;
  padding: 20px;
  font-size: 20px;
  border: 1px solid #c4c4c4;
  filter: drop-shadow(0 0 5px #c4c4c4);
  outline: none;
  background-color: transparent;
  transition: filter 0.3s ease, border 0.3s ease, background-color 0.3s ease;
}

.signUp-INFO-content input:hover {
  border: 1px solid #858585;
}

.signUp-INFO-content input:focus {
  border: 1px solid #ff00ef;
}

.signUp-INFO h2 {
  margin-left: 165px;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: #000;
  font-size: 23px;
  font-weight: 600;
  justify-content: start;
  align-items: start;
  text-align: start;
}

.signUp-password-Strength-section {
  position: relative;
  margin-top: 10px;
  bottom: 20px;
  right: 170px;
}

.signUp-password-Strength-box {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 50px;
  width: 25px;
  border: 3px solid #858585;
  border-radius: 5px;
  transform: rotate(180deg);
}

.signUp-password-Strength-box-lvl {
  height: 0%;
  border-radius: 2px;
  background-color: rgb(255, 255, 255);
  transition: height 0.3s ease;
}

.signUp-password-Strength-lvl1 {
  height: 33.33333333333333%;
  background: linear-gradient(35deg, rgb(255, 0, 0), rgb(150, 0, 0));

}

.signUp-password-Strength-lvl2 {
  height: 66.66666666666667%;
  background: linear-gradient(35deg, rgb(255, 166, 0), rgb(138, 90, 0));

}

.signUp-password-Strength-lvl3 {
  height: 100%;
  background: linear-gradient(35deg, rgb(0, 255, 0), rgb(0, 150, 0));
}

#region {
  width: 500px;
  padding: 10px 10px 10px 10px;
  margin: 0px;
}

.signUp-end {
  display: flex;
  position: relative;
  justify-content: start;
  align-items: start;
  text-align: start;
  margin-top: 10px;
  margin-right: 15px;
}

#signUp-next-btn {
  width: 200px;
  height: 60px;
  border: 3px solid #ff00ef;
  color: #ff00ef;
  background-color: transparent;
  border-radius: 23px;
  text-transform: capitalize;
  letter-spacing: 10px;
  font-weight: 600;
  text-align: center;
  filter: drop-shadow(0 0 50px #ff00ee00);
  transition: opacity 0.2s ease, filter 0.5s ease, background-color 0.3s ease, color 0.3s ease;
}

#signUp-next-btn:hover,
#signUp-next-btn:focus-visible {
  background-color: #ff00ef;
  color: #fff;
  font-weight: 700;
  filter: drop-shadow(0 0 20px #ff00ee32);
}

#signUp-back-btn {
  width: 200px;
  height: 60px;
  border: 3px solid #a4a4a4;
  color: rgb(116, 116, 116);
  background-color: transparent;
  border-radius: 23px;
  text-transform: capitalize;
  letter-spacing: 10px;
  font-weight: 600;
  text-align: center;
  filter: drop-shadow(0 0 50px #ff00ee00);

  transition: opacity 0.2s ease, filter 0.5s ease, background-color 0.3s ease, color 0.3s ease;
}

#signUp-back-btn:hover,
#signUp-back-btn:focus-visible {
  background-color: #a4a4a4;
  color: #fff;
  font-weight: 700;
  filter: drop-shadow(0 0 20px #a4a4a474);
}

#signUp-submit-btn {
  position: absolute;
  display: none;
  right: 0px;
  opacity: 1;
  width: 200px;
  height: 60px;
  border: 3px solid #ff00ef;
  color: #ff00ef;
  background-color: transparent;
  border-radius: 23px;
  text-transform: capitalize;
  letter-spacing: 10px;
  font-weight: 600;
  text-align: center;
  filter: drop-shadow(0 0 20px #ff00ee00);
  transition: opacity 0.2s ease, filter 0.5s ease, background-color 0.3s ease, color 0.3s ease;
}

#signUp-submit-btn:hover,
#signUp-submit-btn:focus-visible {
  background-color: #ff00ef;
  color: #fff;
  font-weight: 700;
  filter: drop-shadow(0 0 20px #ff00ee32);
}

.signUp-password-display-switch {
  position: relative;
  bottom: 20px;
  right: 210px;
}

.signUp-password-display-switch-label {
  --color: #7d7e86;
  --size: 30px;
  display: flex;
  justify-content: end;
  align-items: end;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  fill: var(--color);
  transition: fill 0.3s ease;
}

.signUp-password-display-switch-label .eye {
  position: absolute;
  animation: keyframes-fill .5s;
  transform: translateX(-2px);
}

.signUp-password-display-switch-label .eye-slash {
  position: absolute;
  animation: keyframes-fill .5s;
  display: none;
}

#signUp-password-switch-checkbox[type="checkbox"]:checked~.signUp-password-display-switch-label .eye {
  display: none;
}

#signUp-password-switch-checkbox[type="checkbox"]:checked~.signUp-password-display-switch-label .eye-slash {
  display: block;
}

#signUp-password-switch-checkbox[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
}

#signUp-password-switch-checkbox[type="checkbox"]:focus+.signUp-password-display-switch-label {
  fill: #0037ff;
}





.already-have-acc{
  max-width: 523px;
  border: 2px solid #008cff;
  border-radius: 16px;
  padding: 20px 20px;
  font-size: 18px;
  margin-left: 138px;
  margin-bottom: 20px;
  justify-content: start;
  align-items: start;
  text-align: start;
}
.already-have-acc #signin{
  font-weight: 700;
}

.notallowed{
  display: none;
  max-width: 650px;
  justify-content: start;
  align-items: start;
  text-align: start;
  filter: drop-shadow(0 0 25px #000);
  color: #fff;
}
.notallowed-body{
  background-color: #cc0000;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 30px 30px;
  font-size: 23px;
}
.notallowed-body h1{
  font-size: 32px;
  margin-bottom: 18px;
  font-weight: 900;
}
.notallowed-body a{
  color: #fff;
}
.notallowed-footer{
  justify-content: end;
  align-items: end;
  text-align: end;
  padding: 15px 20px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  font-family: title;
  font-size: 13px;
  background-color: #7d0000;
}



@font-face {
  font-family: SfPro;
  src: url(../assets/fonts/SF-Pro.ttf);
}

@font-face {
  font-family: title;
  src: url(../assets/fonts/SF-Pro-Bold.otf);
}