html, body{
    margin: 0;
    height: 100%; 
    overflow: hidden
}

body{
  background-image: url("../images/login.jpg");
  background-size: cover;
}

.bg{
  height: 100%;
  width: 100%;
  position: absolute;
  background: rgb(150, 150, 150, 0.5) url(img/bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

.bg:hover {
  background-color: rgb(150, 150, 150, 0.5);
}
.bg:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

.purple{
height: 160%;
width: 75%;

display: flex;
align-items: center;
justify-content: center;

position: relative;
right: -52.5%;
bottom: 40%;

border-style: solid;
border-width: 8vh 5vw;
background-color: white;
border-color: #45017C;
border-radius: 100%;
}

.blue{
height: 90%;
width: 90%;

background-color: rgb(0, 153, 255);
border-radius: 100%;
}

.image{
  position:absolute; 
  top:-10%;
  left: -300%;
  height: 310px;
  width: 310px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
}
img{
  height: 300px;
  width: 300px;
  margin-left: 10px;
}
.logo_bg{
  height: 62%;
  width: 31%;
}
.login {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: relative;
    max-width: 240px;
    width:100%;
    top:40%;
    left:12.5%;
  }
  
  .login label.email {
    font-size: 100%;
    color: rgb(0, 0, 0);
    font-weight: 700;
    position: relative;
    top: 0rem;
    margin: 0 0 0 7px;
    padding: 0 5px;
    width: fit-content;
  }
  
  .login input[type=text].email {
    padding: 11px 10px;
    height: 25px;
    width: 125%;
    font-size: 100%;
    border: 2px rgb(0, 200, 255)solid;
    border-radius: 10px;
    background: #e8e8e8;
  }
  
  .login input[type=text].email:focus {
    outline: none;
  }
  
  .login label.pass {
    font-size: 100%;
    color: rgb(0, 0, 0);
    font-weight: 700;
    position: relative;
    top: 0rem;
    margin: 0 0 0 7px;
    padding: 0 5px;
    width: fit-content;
  }
 
  form .input-box input{
    height: 10px;
    width: 100%;
    outline: none;
    padding: 20px 5px;
    font-size: 17px;
    font-weight: 400;
    color: #333;
    border: 1.5px solid #C7BEBE;
    border-bottom-width: 2.5px;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #290868;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
  outline: none;
  border:none;
}

.button:hover {
  background-color: #3e05a8;
}

form .button3{
  position: absolute;
 left: 55%;
}

.button2 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #290868;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    outline: none;
    border:none;
    width: 105px;
  }

  .button2:hover {
    background-color: #3e05a8;
  }




.signupbutton{
    position:relative;
    left:25%;
    background-color: rgb(0, 153, 255);
    width: 50%;
    padding: 5% 10%;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
   border:none; 
  
}

.logo{
    height: 70%;
    width: 30%;

  
    position: relative;
    right: -10%;
    top: -160%;


    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-size: contain;
}