@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,body{
  overflow-x: hidden;
}

body{
  /* min-height: 100dvh; */
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  
  display: flex;
  flex-direction: column;
  /* align items center WRECKS when in small viewports okay so kept it off */
  /* align-items: center; */
  /* something new, for cursors, you can set a custom img and fallback to default if it doesnt load */
  overflow-x: hidden;
}

/* .loader{
  position: absolute;
  height: 100dvh;
  width: 100dvw;
  background-color: black;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  justify-content: center;
  align-items: center;
}

.loader h2{
  background-clip: text;
  -webkit-background-clip: text;
  color: rgb(111, 221, 255);
  color: rgba(111, 221, 255, 0%);
  background-image: linear-gradient(to bottom,skyblue 0%, skyblue 5%, blue, blue);
  text-shadow: 0 0 2px skyblue;
}

.loader progress[value]{
  -webkit-appearance: none;
  appearance: none;
  width: 270px;
  height: 10px;
}
.loader progress[value]::-webkit-progress-bar{
  background-color: black;
  border-radius: 40px;
  box-shadow: inset 0 0 2px 1px skyblue, 0 0 1px 1px skyblue;
}

.loader progress::-webkit-progress-value{
  background: white;
  border-radius: 40px;
  box-shadow: inset 0 0 2px 1px skyblue;
} */

/* cross browser fix from claude, firefox, chrome, they all handle progress bars different */

.loader {
  position: absolute;
  height: 100dvh;
  width: 100dvw;
  background-color: black;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.loader h2 {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to bottom, skyblue 0%, skyblue 5%, blue, blue);
  text-shadow: 0 0 2px skyblue;
}

/* --- Cross-browser progress bar --- */

.loader progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 270px;
  height: 10px;

  /* Firefox styles the <progress> element itself as the track */
  background-color: black;
  border-radius: 40px;
  border: none;
  box-shadow: inset 0 0 2px 1px skyblue, 0 0 1px 1px skyblue;
  color: white; /* Firefox uses this as the fill color */
}

/* Chrome / Safari — track */
.loader progress[value]::-webkit-progress-bar {
  background-color: black;
  border-radius: 40px;
  box-shadow: inset 0 0 2px 1px skyblue, 0 0 1px 1px skyblue;
}

/* Chrome / Safari — fill */
.loader progress[value]::-webkit-progress-value {
  background: white;
  border-radius: 40px;
  box-shadow: inset 0 0 2px 1px skyblue;
}

/* Firefox — fill */
.loader progress[value]::-moz-progress-bar {
  background: white;
  border-radius: 40px;
  box-shadow: inset 0 0 2px 1px skyblue;
}

.userselnone{
  user-select: none;
}


:root{

  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  --orange: hsl(44, 100%, 50%);
  --dark-orange: hsl(33, 100%, 55%);
  --purple: skyblue;
  --dark-purple: rgb(255, 255, 255);
  --dark-font: hsl(0, 0%, 10%);
  --dark-light: hsl(0, 0%, 15%);
  --grey-font: hsl(0, 0%, 30%);
}


.hero-section{
  position: relative;
  min-width: 100%;
  min-height: 100dvh;
  background-color: rgb(2, 26, 26);
  background: url(images/sitebackground.png);
  background-repeat: no-repeat;
  background-size: cover;
  /* THE BACKGROUND WILL SCROLL AND ADJUST DYNAMICALLY IF THIS IS ON REMEMBER FROM YOUR TICTACTOE PROJECT */
  /* turning it off fixed the issue of it dynamically adjusting on scroll here */
  /* background-attachment: fixed; */
  overflow: hidden;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px solid rgba(123, 0, 255, 0.75);
  box-shadow: 0px 10px 60px  rgba(123, 0, 255, 0.75), inset 0 0 600px black;

}

.nav{
  min-height: 75px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 1vw;
  padding-top: 20px;
}

.nav .ul{
  display: flex;
  list-style: none;
  gap: 25px;
}

.nav .ul a{
  color: white;
  text-decoration: none;
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.nav .Wizard2{
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-right: auto;
  margin-left: 50px;
  cursor: pointer;
}

.nav .quote{
  margin-right: 25px;
  margin-left: 25px;
}

.nav .quote button{
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  border: none;
  background-color: transparent;
  color: white;
  font-size: 1vw;
  font-weight: 600;
  border: 2px solid white;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
}

.bars{
  display: none;
  font-size: 1.5rem;
  margin-right: 50px;
  cursor: pointer;
}

.hero-section h2{
  z-index: 1;
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1{
  margin-top: 100px;
  font-size: 4rem;
  text-decoration: underline;
  z-index: 1;
}

h1 span{
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url(images/clouds.png),linear-gradient(to top, rgb(255, 255, 255), rgba(135, 207, 235, 0), rgba(64, 0, 255, 0));
  background-position: 100% 50%, center;
  color: transparent;
}

h1 span span{
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.785), rgba(235, 135, 183, 0.867), rgba(64, 0, 255, 0.628));
  background-position: center;
  color: transparent;
  z-index: 1;
}

.character-carousel{
  min-width: 100%;
  max-height: 700px;
  background: linear-gradient(to top, rgba(168, 32, 218, 0.16), black, rgba(89, 0, 255, 0.19), rgba(0, 0, 139, 0));
  display: flex;
  /* background-color: black; */
  gap: 40px;
  position: absolute;
  bottom: -75px;
  left: 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  z-index: 0;
}


.character-wrapper{
  position: relative;
  top: 0;
  left: 0;
  width: 800px;
  min-height: 800px;
  background-color: aquamarine;
  background: url(images/spacedarkshiny.png);
  background-position: -45px -300px;
  
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transform: scale(.8);
  z-index: 0;
}

.fairy-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  
  background-color: aquamarine;
  background: url(images/fairybackground.png);
  background-position: -45px -300px;
  
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  border: 2px solid rgb(255, 203, 100);
  outline: 1px solid rgb(255, 203, 100);
  outline-offset: 2px;

  box-shadow: 0 0 100px 1px rgb(255, 237, 176);
}

.dark-wrapper{
  position: relative;
  top: 0;
  left: 0;
  
  background-color: aquamarine;
  background: url(images/astralgate.png);
  background-position: -45px -300px;
  
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  border: 2px solid rgb(100, 175, 255);
  outline: 1px solid rgb(100, 175, 255);
  outline-offset: 2px;

  box-shadow: 0 0 100px 1px rgb(100, 175, 255);
}


.queen-wrapper{
  position: relative;
  top: 0;
  left: 0;
  
  background-color: aquamarine;
  background: linear-gradient(rgba(0, 0, 0, 0.83),rgba(255, 177, 9, 0.185)), url(images/blackqueenfloor.png);
  background-position: center,-45px -400px;
  
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  border: 2px solid rgb(255, 197, 142);
  outline: 1px solid rgb(255, 244, 227);
  outline-offset: 2px;

  box-shadow: 0 0 100px 1px rgb(255, 203, 100);
}


.autumn-wrapper{
  position: relative;
  top: 0;
  left: 0;
  
  background-color: aquamarine;
  background: url(images/autumn.png);
  background-position: -60px -500px;
  
  background-size: 110%;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  border: 2px solid rgb(255, 100, 100);
  outline: 1px solid rgb(255, 100, 100);
  outline-offset: 2px;

  box-shadow: 0 0 100px 1px rgb(255, 100, 100);
}

.character-container{
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* background-color: black; */
  pointer-events: none;
}

.left-wing-container{
  position: absolute;
  top: 10%;
  left: 30%;
  translate: -50%;
}

.right-wing-container{
  position: absolute;
  position: absolute;
  top: 10%;
  right: 15%;
  translate: -50%;
}


.right-wing, .left-wing{
  scale: 1.5;
  filter:saturate(200%) brightness(110%) drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.712));
}


.left-darkwing-container{
  position: absolute;
  top: -5%;
  left: 25%;
  z-index: 1;
  rotate: -135deg;
  translate: -50%;
  pointer-events: none;
}

.right-darkwing-container{
  position: absolute;
  position: absolute;
  bottom: 45%;
  left: 100%;
  rotate: 45deg;
  translate: -50%;
  pointer-events: none;
}


.left-darkwing{
  scale: 0.8;
  filter:saturate(100%) brightness(40%) drop-shadow(-10px -10px 4px rgb(0, 0, 0));
}

.right-darkwing{
  scale: 0.8;
  filter:saturate(100%) brightness(40%) drop-shadow(10px -10px 4px rgba(0, 0, 0, 0.712));
}

.left-sword-container{
  position: absolute;
  top: -85%;
  left: 55%;
  z-index: 1;
  rotate: -135deg;
  translate: -50%;
  pointer-events: none;
  z-index: 0;
}

.right-sword-container{
  position: absolute;
  position: absolute;
  bottom: -15%;
  left: 50%;
  rotate: 45deg;
  translate: -50%;
  pointer-events: none;
  z-index: 0;
}


.left-sword{
  scale: .65;
  filter:saturate(100%) brightness(80%) drop-shadow(-10px -10px 4px rgb(0, 0, 0));
}

.right-sword{
  scale: .65;
  filter:saturate(100%) brightness(40%) drop-shadow(10px -10px 4px rgba(0, 0, 0, 0.712));
}


.character{
  filter: brightness(120%) drop-shadow(10px 10px 8px rgba(0, 0, 0, 0.774));
  position: relative;
}


.left-wing{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: leftflap;
}

.right-wing{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: rightflap;
}

.left-darkwing{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: darkleftflap;
}

.right-darkwing{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: darkrightflap;
}

.left-sword{
  animation-duration: 20s;
  animation-direction: forwards;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: swordrotate;
}

.right-sword{
  animation-duration: 240s;
  animation-direction: forwards;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: swordrotate;
}

.character{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: fairyhover;
}

.dark-character{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: princesshover;
}

.queen-character{
  animation-duration: 1s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: princesshover;
  z-index: 2;
}

.character-carousel{
  animation-duration: 60s;
  animation-direction: forwards;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
  animation-name: carousel;
}

.character-carousel:hover{
  animation-play-state: paused;
}

@keyframes leftflap{
  from{
    transform: rotateZ(0);
  }to{
    transform: rotateZ(-10deg);
  }
}

@keyframes rightflap{
  from{
    transform: rotateZ(0);
  }to{
    transform: rotateZ(10deg);
  }
}

@keyframes darkrightflap{
  from{
    transform: translateY(0px);
    transform: rotate(1deg) rotateY(-25deg);
  }to{
    transform: translateY(5px);
    
  }
}

@keyframes darkleftflap{
  from{
    /* transform-origin: bottom left; */
  }to{
    transform: translateY(0px);
    transform: rotate(1deg);
  }
}

@keyframes swordrotate{
  from{
    /* transform-origin: bottom left; */
    transform: rotate(0);
  }to{
    transform: rotate(360deg);
  }
}

@keyframes fairyhover{
  from{
    transform: translateY(0);
  }to{
    transform: translateY(10px);
  }
}

@keyframes princesshover{
  from{
    transform: translateY(0);
  }to{
    transform: translateY(3px);
  }
}

@keyframes carousel{
  0%{
    transform: translateX(0);
    /* background-color: transparent; */
  }
  100%{
    transform: translateX(-33.45%);
    /* did this to check when it is happening is it smooth af or not */
    /* background-color: rgba(0, 0, 0, 0.527); */
  }
}

.character-wrapper{
  scale: 0.75;
}

.queen-character{
  scale: 0.75;
}



.buttons-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* background-color: white; */
  padding: 20px;
  gap: 20px;
  z-index: 100;
}

.btn{
  padding: 20px 80px;
  background: url(images/spacedarkshiny.png);
  color: rgb(235, 203, 255);
  text-shadow: 0 0 16px rgb(204, 123, 255);
  border: none;
  border-radius: 12px;
  outline-offset: 2px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  position: relative;
  cursor: pointer;
}

.login-btn{
  /* background: transparent; */
}

.btn::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  
  background: rgb(221, 165, 255);
  border-radius: 12px;
  border: none;
  top: 4px;
  left: 0;
  z-index: -1;
  box-shadow: 0 0 10px 2px rgb(175, 46, 255);

}

.btn-wrapper:active{
  transform: translateY(4px);
  .btn::before{
    transform: translateY(-4px);
  }
}

/* signup section */
.signup-section{
  display: flex;
  width: 100%;
  min-height: 100dvh;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  background-color: black;
  background-image: url(images/bgforsignup.png);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;

  /* add this in order to fix that button clicking and the background will not also
  strech with the gsap elements, because overflow hidden was off before so it stretched
  to accomodate them initially*/
  
  overflow-x: hidden;
}

.info-div {
  /* align-self: center; */
  padding-left: 3rem;
  padding-top: 6rem;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  width: fit-content;
  justify-content: center;
  /* offset it when zooming out */
  max-width: 600px;
  width: 100%;
}



.info-div-content {
  /* did this now to center it when zooming out
  looks better now in my opinion*/
  align-self: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.techflow-container {
  display: flex;
  /* by default you know this
  already but you typed it anyways*/
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  position: relative;
  width: fit-content;
  margin-bottom: 2rem;
}

.techflow-container h1 {
  background: linear-gradient(90deg, rgb(247, 16, 247) 50%, rgb(23, 212, 181));
  text-decoration: none;
  position: relative;
  bottom: 10px;
  right: 2px;
  background-clip: text;
  /* you need to add this for browser
  compatibility also like firefox,
  edge etc*/
  -webkit-background-clip: text;
  color: transparent;
}

.techflow-container span {
  color: #ccc;
  font-weight: 600;
  position: absolute;
  left: 0%;
  top: 90%;
  white-space: nowrap;
}

.logo-div {
  /* fallback */
  background-color: purple;
  /* beautiful radial inner color */
  /* background: radial-gradient(hsl(39, 100%, 50%), hsl(39, 100%, 50%), hsl(39, 100%, 50%), hsl(39, 100%, 50%), hsl(20, 100%, 50%)); */
  /* my bad, it was a linear grad not radial, try conic too */
  /* background: conic-gradient(purple, rgb(160, 50, 0), purple, purple, purple);
  this was not so good stick to linear grad */
  background: radial-gradient( rgb(150, 220, 248) 20%,rgb(82, 142, 255) 80%, rgb(0, 17, 255));
  padding: 2rem;
  border-radius: 16px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* subtle glow */
  box-shadow: 0 0 20px 1px skyblue;
  position: absolute;
  left: 150px;
  bottom: 75px;
}
/* wrapped it in another div
for some reason... div > ion-icon
and the font size and padding was conflicting...
learn more about that later */
.logo-div i {
  font-size: 1.5rem;
}

.info-div h2 {
  color: white;
  max-width: 50%;
  font-size: 3rem;
}
.info-div h2 span {
  /* this is how to get transparent text
  and overlay images or bgs behind them
  as grads memorize the technique - dave gray */
  /* MEMORIZE THIS FOR A COOLER EFFECT */
  background-image: linear-gradient(90deg, rgb(191, 52, 255) 50%, rgb(51, 230, 236));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info-div p.desc {
  color: whitesmoke;
  font-size: 2rem;
}

.guarantees-container {
  /* top lr bottom yk this */
  margin: 1rem 0 4rem;
}

.guarantee-div {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  position: relative;
  width: fit-content;
}

.guarantee-div h3 {
  color: white;
}

.guarantee-div span {
  position: absolute;
  top: 25px;
  left: 72px;
  color: #ccc;
  white-space: nowrap;
}

.g-logo-div {
  color: rgb(0, 255, 255);
  background-color: rgba(0, 51, 109, 0.472);
  padding: 0.75rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 1rem;
}

.status-div {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  color: #ccc;
  align-items: center;margin-bottom: 3rem;
}

.status-div div {
  display: flex;
  align-items: center;
  position: relative;
  left: 10px;
}

.status-div div p {
  position: relative;
}

.status-bullet {
  color: rgb(87, 235, 255);
  font-size: 2rem;
  position: relative;
  top: 5px;
  right: 5px;
}
.status-users {
  color: rgb(255, 44, 255);
  position: relative;
  top: 6px;
  right: 5px;
}

.active-users-text {
  position: relative;
  top: 6px;
}
/* signup */

.info-div-2{
  max-width: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: black; */
  /* background-color: red; */
}

.info-div-content-2{
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: #232730;
  color: white;
  padding: 2rem 2rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px 0.01rem hsla(0, 0%, 0%, 0.25);
  min-height: 700px;
  min-width: 400px;
  border: 1px solid hsla(210, 100%, 100%, 0.603);
  margin-bottom: 3rem;
}

.container h2 {
  text-align: center;
  font-size: 28px;
  color: white;
}

.container p {
  color: var(--grey-font);
  font-size: 14px;
  text-align: center;
  padding: 1rem 0;
  color: #bbb;
}

.or-divider {
  color: hsl(0, 0%, 90%);
  align-self: center;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: .5rem;
  width: 100%;
}

.or-divider hr{
  width: 100%;
  /* remember */
  border: none;
  height: 1px;
  background-color: #545c64;
}

.or-divider div{
  white-space: nowrap;
  position: relative;
  color:  #999;
  bottom: 2px;
}

.social-row {
  padding-top: 10px;
  align-self: center;
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
  width: 100%;
  justify-content: center;
  button {
    background-color: aliceblue;
    border: 1px solid hsla(204, 11%, 49%, 0.35);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    min-height: 40px;
    background-color: #343a47;
    color: white;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .25rem;
  }

  button img{
    max-width: 1.3rem;
  }

  button:hover {
    background-color: #383f4e;
    cursor: pointer;
  }
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2rem 0;
  margin-bottom: 0;
}

.form-group {
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  label {
    color: whitesmoke;
    padding-bottom: 0.35rem;
    font-weight: 600;
  }

  input[type="email"],
  input[type="password"] {
    padding: 10px 12px;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #191c24;
    color: whitesmoke;
    /* remember this first time actually using it 
    text-indent for offestting for that little logo in the front*/
    text-indent: 24px;
  }

  input[type="email"]:focus,
  input[type="password"]:focus {
    outline: none;
    border: 1px solid var(--purple);
  }
}
.form-group .front-icon-at, .form-group .front-icon-lock{
  position: absolute;
  top: 44%;
  left: 2%;
  color: grey;
  font-size: 24px;
}

.remember-row {
  padding-top: 1rem;
  align-self: flex-start;
  margin-left: 6px;
  color: hsla(0, 0%, 89%, 0.7);
  font-weight: 400;
}

.forgot-pass {
  align-self: flex-end;
  position: relative;
  bottom: 20px;
  color: var(--purple);
  text-decoration: none;
}


.submit-btn {
  margin-top: 1rem;
  width: 100%;
  color: black;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255) 70%);
  box-shadow: 0 0 20px 1px rgba(98, 237, 255, 0.458);
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  min-height: 55px;
  z-index: 10;
  
}

.submit-btn:hover {
  cursor: pointer;
  background: var(--dark-purple);
  box-shadow: 0 0 20px 1px rgb(80, 229, 255);
  z-index: 10;
}

.forgot-pass:hover {
  color: var(--dark-purple);
}







.signup-row {
  align-self: center;
  text-align: center;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #aaa;
  a {
    text-decoration: none;
    color: var(--purple);
    font-weight: 600;
  }
  a:hover {
    color: var(--dark-purple);
  }
}

.create-account{
  padding-bottom: 1.5rem;
}

.tos{
  font-size: 12px;
}

.social-btn{
  font-size: 1.5rem;
  text-shadow: 0 0 10px white;
}

.social-btn:hover{
  color: rgb(132, 226, 255);
  text-shadow: 0 0 10px rgb(132, 226, 255);

}

@media screen and (max-width: 700px){
  .info-div p.desc{
    font-size: 20px;
  }

  .container{
    scale: .85;
  }
}



@media screen and (max-width: 1100px){

  body{
    min-width: 100dvw;
    min-height: 100dvh;
    background-color: black;
    position: relative;
  }
  .logo-div{
    position: absolute;
    top: 20px;
    left: 0;
  }

  
  /* .character-carousel > *{
    transform: scale(.5);
  } */
  .Wizard2{
    font-size: 1.5rem;
  }
  .nav .ul{
    display: none;
  }
  .quote{
    display: none;
  }

  .bars{
    display: flex;
  }

  .buttons-container{
    scale: .5;
  }

  .btn{
    white-space: nowrap;
  }
  h1{
    font-size: calc(100% + 1rem);
  }

}

@media screen and (max-width: 735px){
  h2{
    font-size: 16px;
  }

}

@media screen and (max-width: 435px){
  h1{
    font-size: 26px;
  }

  .character-carousel > *{
    /* transform: scale(.5) translateY(390px); */
  }
}

@media screen and (max-height: 850px){
  .character-carousel{
    top: 95%;
  }
}

@media screen and (max-height: 600px){
  .character-carousel{
    top: 125%;
  }
}

@media screen and (max-aspect-ratio: 9/16){
  .hero-section{
    min-height: 75dvh;
  } 

  .character-carousel{
    top: 50%;
  }
  .character-carousel > *{
    transform: scale(.5) translateY(-50px);
  }
}