@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@600&display=swap");

:root {
  --main-icon-color: #5328af;
  --main-bg-color: #f3f3fb;
}

body {
  overflow: hidden;
  background-color: var(--main-bg-color);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  height: 400px;
}

.login,
.register {
  max-width: 35rem;
  width: 100%;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#load {
  margin: auto;
  width: 100%;
  height: -webkit-fill-available;
  position: fixed;
  background: #fff url(/images/Spin-Preloader-1.gif) no-repeat center;
  z-index: 9999999;
}

.welcome h1 {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  margin: 0% 0%;
  font-size: 1.8em;
}

.welcome span {
  font-family: "Poppins";
  color: #8e8d8d;
  font-size: small;
}

.inputs {
  margin: 2.2em 0em;
  margin-bottom: 0em;
}

.inputs span {
  font-family: "Poppins";
  font-weight: 600;
  font-size: small;
}

.inputbox {
  width: 300px;
  margin: 0.8em 0em;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 8px 20px;
  border: 1px solid #c7c7c7;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 16px / normal "Poppins";
  color: #000000;
  -o-text-overflow: clip;
  text-overflow: clip;
}

/*.forgotpass {
  display: flex;
  justify-content: space-between;
  width: 350px;
  align-items: center;
}
*/
.forgotpass span {
  font-family: "Poppins";
  font-weight: 650;
  font-size: small;
  color: var(--main-icon-color);
  cursor: pointer;
}

.signin {
  margin: 0.5em 0em;
  width: 320px;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 10px;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 16px / normal "Poppins";
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: var(--main-icon-color);
  background: linear-gradient(0deg,
      rgba(96, 9, 240, 1) 0%,
      var(--main-icon-color) 100%);
  border: none;
}

.signin:before {
  height: 0%;
  width: 2px;
}

.signin:hover {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.5),
    -4px -4px 6px 0 rgba(116, 125, 136, 0.5),
    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.4);
}

.back-1 {
  margin-top: -0.6%;
}

.signupline {
  font-family: "Poppins";
  color: #8e8d8d;
  font-size: small;
  padding: 1em 5em;
}

.signupbutton,
.signinbutton {
  font-family: "Poppins";
  font-weight: 650;
  font-size: small;
  color: var(--main-icon-color);
  cursor: pointer;
}

.register {
  display: none;
}


@media screen and (max-width: 1920px) {
  img {
    width: 40%;
    height: 2%;
    margin: -25em 45em;
    margin-top: 8%;
  }

  .login ,.register {
    margin-left: 8%;
    margin-top: -5%;
  }

  .forgotpass span {
    margin-left: 230px;
  }

  .back{
    margin-top: -3.5%;
  }

  .welcome {
    margin-left:15%;
  }

  .welcome span {
   margin-left: 0%;
  }
}
@media screen and (max-width: 970px) {
  img {
    margin: 6em 25em;
    width: 70%;
  }
}
@media screen and (max-width: 720px) {
  img {
    margin: 0em 0em;
    width: 80%;
    height: 40%;
    padding-bottom: 12%;

  }
  .login {
    margin-top: 8%;
  }
  
}
@media screen and (max-width: 575px) {
  img {
    width: 50%;
    height: 42%;
    padding-bottom: 20%;
  }
  
}
@media screen and (max-width: 484px) {
  img {
    width: 140%;
    margin-top: 15%;
  }
  .login {
    margin-top: 45%;
  }
}
@media screen and (max-width: 380px) {

  .welcome {
    text-align: center;
    margin-top: -20%;
    margin-left: 15px;
  }
  .welcome h1 {
    font-size: 1.5em;
    margin-left: auto;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

  img {
    max-width: 80%;
    height: 40%;
    margin-left: 30px;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

  .login {
    margin-top: -6%;
    margin-left: 10px;
  }
  .inputs {
    margin: 2.2em 0em;
    margin-bottom: 0em;
  }
  
  .inputs span {
    margin-left: 15px;
  }
  .inputbox {
    width: 270px;
    margin-left: 15px;
  }
  
  .forgotpass span {
    margin-left: 200px;
  }

  .back {
    margin-top: -5%;
    margin-left: 15px;
  }

  .signin {
    width: 300px;
    margin-left:12px ;
    margin-top: 0;
    align-items: center;
    justify-content: center;
  }

  .signupline {
    padding-top: 5px;
  }

  .welcome span {
    margin-right: 15%;
  }
}