* {
  font-family: 'Poppins', sans-serif;
  font-family: 'Rubik', sans-serif;
}

html, body {
height: 100%
} 

body {
  background-color: #f3e8e8;
  max-width: 100%;
  overflow-x: hidden;
}

.login-div {
  border-radius: 20px;
  position: relative;
  right: -55%;
  top: -90%;
  height: 220vh; 
  width: 70vw; 
  max-width: 400px;
  max-height: 550px;
  padding: 60px;
}

.login-text{
  position: relative;
  right: -10%;
  top: -78%;
  font-size: 150%;
}

.no-account {
  position: relative;
  font-size: 120%;
  right: -58%;
  top: -78%;
}

.title{
  font-family: 'Poppins', sans-serif;
  margin-left: 60px;
  margin-bottom: -50px;
  font-size:40px;
  color: white;

}

.form{
  width: 100%;
  position: relative;
  left:-10%;
}

.form input {
  font-size:  18px;
  padding: 10px 20px 10px 5px;
  position: relative;
  right: -2%;
  border: none;
  outline: none;
  background: none;
}

.username{
  font-family: 'Poppins', sans-serif;
  display: block;
  position: relative;
  border-radius: 40px;
  border: 1px solid rgb(255, 255, 255);
  padding: 10px;
  margin-bottom: 30px;
  height: 15%;
  width: 120%;
}

.password{
  font-family: 'Poppins', sans-serif;
  position: relative;
  display: block;
  border-radius: 40px;
  border: 1px solid rgb(255, 255, 255);
  padding: 10px;
  margin-bottom: 10px;
  height: 15%;
  width: 120%;
  top:-20%;
}

.form svg {
  height: 25px;
  position:relative;
  right: 43%;
}

.options {
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 0px;
  margin-bottom: 30px;
}

.signin-btn {
  padding: 12px 10px;
  border: none;
  font-size: 18px;
  background-color: #8D9EDB;
  color: #fff;
  display: block;
  margin: 0 auto;
  border-radius: 50px;
  height: 15%;
  width: 120%;
}


.sign-up{
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: large;
  font-weight: 500, bolder;
  top: -100%
}

.login{
  position: relative;
  right: -5%;
  top: -75%;
}

.forgot{
color: #000000;
font-family: 'Poppins', sans-serif;
text-align: center;
position: relative;
top: 5px;
font-size: large;
font-weight: 500, bolder;
right: -10%;
}

a {
  text-decoration: none;
  color: #505050;
}

/* other add */
*{
  margin:0;
  box-sizing: border-box;
}

.topnav 
{
  background: #080e36;
  overflow: hidden;
  display: flex;
  padding: 20px;
  justify-content: space-between;
}

.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 7px;
}

.logo{
  color: white;
  padding-right: 20px;
  font-size: 32px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the current link */
.topnav a.active {
  background-color: #4D4D4D;
  color: white;
}


h1 {
  color:black;
  text-align: center;
  padding-top: 10px;
  font-size: 100px;
  /* text-shadow: 4px 4px #000000; */
  font-family: Georgia, serif;
}


footer{
  width: 100%;
  bottom: 0;
  position: fixed;
  left: 0;
  height: 50px;
  text-align:center;
}