/* default browsser */
*{
  padding: 0;
  margin:0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
/* root styles for construction */
:root{
  --mainDarkBlue:#262A41;
  --inputBackground:#3C3F54;
  --secondInputBackground:#dbdbdf;
  --inputTextColor:#3C3F54;
  --firstWhite:#F7F7FF;
  --mainGrey:#707070;
  --standardWhite:#fff;
  --secondDarkBlue:#3c3f54;
  --mainPink:#f935a9;
  --secondMainPink:#d476af;
  --mainLightBlue:#30bbb5;
  --mainPurple:#7946c1;
  --mainBlack:#000;
  --bluePurple:#323974;
  --secondLight:#75d6d1;
  --boxShadowBtn:#30BBB574;
  --userCardBoxShadow:#0000000D;
  /* non-colors */
  --mainTransition:0.3s all linear;
  --cardTransition:0.6s all linear;
  --mainBorderRadius:16px;
  --btnBorderRadius:7px;
  --secondBtnBorderRadius:13px;
}
body{overflow-x: hidden;}
/* end of root styles for construction */
.centered-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-card-container{
  transition:var(--cardTransition);
  position: relative;
}
.hide-back-btn{
  display:none;
}
.show-back-btn{
  display:block;
}
.user-card-display{
  transition:var(--mainTransition);
}
.hide-user-card{
  transform: translateY(-150%);
  opacity: 0;
  transition:var(--cardTransition);
}
.show-user-card{
  transform:translateY(0%);
  transition: var(--mainTransition);
}
.user-profile-display{
  /* transition: var(--mainTransition); */
  transition:.5s all ease;
  opacity: 0;
  /* display: none; */
  margin-top:40px;
  transform:translateX(100%);
  position:absolute;
  /* right:0px; */
}
.show-user-profile{
  grid-area: user-card-display;
  transform: translateX(0%);
  display:block;
  opacity:1;
}
.user-not-found{
  color:var(--bluePurple);
  text-align: center;
  text-transform: uppercase;
}
/* styles for preloader */
.preloader{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#F7F7FF;
  box-shadow:var(--userCardBoxShadow);
  display: grid;
  justify-content:center;
  align-items:center;
  visibility: visible;
  z-index:999;
  transition: var(--mainTransition);
}
.hide-preloader{
  z-index:-999;
  visibility:hidden;
}