/* CSS Document */
body {
	height: 100vh;
	  background: rgb(182,232,244);
	  background:   linear-gradient(
	    143deg,
	    hsl(181.04, 100%, 45.1%) 0%,
	    hsl(181.32, 100%, 45.1%) 8%,
	    hsl(182.11, 100%, 45.1%) 15.4%,
	    hsl(183.36, 100%, 45.1%) 22.2%,
	    hsl(185.01, 100%, 45.1%) 28.6%,
	    hsl(187.01, 100%, 45.1%) 34.6%,
	    hsl(189.31, 100%, 45.1%) 40.4%,
	    hsl(191.87, 100%, 45.1%) 46.1%,
	    hsl(194.62, 100%, 45.1%) 51.7%,
	    hsl(197.49, 100%, 45.1%) 57.5%,
	    hsl(200.4, 100%, 45.1%) 63.4%,
	    hsl(203.23, 100%, 45.1%) 69.7%,
	    hsl(205.83, 100%, 45.1%) 76.4%,
	    hsl(207.98, 100%, 45.1%) 83.6%,
	    hsl(209.46, 100%, 45.1%) 91.4%,
	    hsl(210, 100%, 45.1%) 100%
	  );
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*Hoofd DIV van de pagina, waarin login venster komt */
.main_div {
  	width: 24vw;
  	height: 750px;
  	background-color: white;
	
	border: 3px solid white;
  	border-radius: 25px;
	
	color: #494949;
	
  	position:absolute;
  	left:0; right:0;
  	top:0; bottom:0;
  	margin:auto;	
	
	animation: fadeIn 0.3s;
	
	box-shadow: 5px 10px 70px 10px #0D9DDB;
}

.main_div .footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.main_div h1 {	
	margin-top: 80px;
	
	text-align: center;
	font-size: 35px;
}

.main_div h2 {
	text-align: center;
	font-size: 20px;
}

.main_div form {
	margin: 85px 5px 5px 45px;		
}

.main_div .login {
	height: 50px;
	width: 95%;
	background-color: white;
	
	border-radius: 25px;
	border-bottom: 2px solid #0D9DDB;
	
	margin-top: 25%;
	margin-left: 12px;
	
	font-weight: 1800;
	font-size: 20px;
}

.main_div .login:hover {
	background-color: #0D9DDB;
	color: white;
	cursor: pointer;
	transition: 0.2s;
}

.main_div input {
	width: 18vw;
	height: 30px;
	
	border: none;
	border-bottom: 2px solid #D1D1D4;
	
	font-weight: 700;
	font-size: 15px;
	
	padding-left: 7%;
	
	color: #494949;
	
}

.main_div input:focus {
	outline: none;
}

.main_div div {
	padding-top: 5%;
}

.main_div .login_icon {
	position: absolute;
	margin-top: 1%;
	color: #0D9DDB;
}

.background_shape {
	position: absolute;
	transform: rotate(45deg);
}

.background_shape_1 {
	height: 20%;
	width: 20%;
	background: #6C63AC;	
}