style.css

*{
	box-sizing: border-box;
	font-family: montserrat,roboto;
	
}

	.container
	{
	
	padding: 30px;
	width: 500px;
	display: inline-block;
	float: left;
	height: 500px;
	opacity: 0;
	animation:slideup 1s ease 1.1s forwards;
	margin:auto;
	margin-left: 40px;
	}
.sub
{
	display: block;
	margin-left: 20px;

	
}


		.backg{
			position: absolute;
           }
		.login{
			height:220px;
			width: 280px;
			background-color: white; 
			position: relative;
			top:190px;
			left:25px;
			padding-left: 30px;
			box-sizing: border-box;
			z-index: 1;		
			padding-top: 50px;


		}
		.frm{
			position: relative;
			top:50px;
			
		}
		.face{
			height: 120px;
			width: 135px;
			background-color: white;
			border-radius:120px 120px 90px 90px;
			position: relative;
			bottom: 40px;
		}
		.earl,.earr{
			background-color: #4d4449;
			height: 40px;
			width: 45px;
			border-radius: 43px 43px 0 0;
		}
		.earl{
			transform: rotate(-38deg);
			-webkit-transform: rotate(-38deg);
			position: relative;
			top:31px;
			right: 2px;
		}
		.earr{
			transform: rotate(38deg);
			-webkit-transform: rotate(38deg);
			position: relative;
			bottom:8px;
			left:96px;
		}
		.panda{
			position: relative;
			bottom:190px;
			left:100px;

		}
		.eyel,.eyer{
			background-color: #4d4449;
			height: 35px;
			width: 32px;
			border-radius:32px; 
			position: relative;	
		}
		.eyel{
			top:5px;
			left:22px;
			transform:rotate(-20deg); 
			-webkit-transform:rotate(-20deg); 
				
		}
		.eyer{
			transform: rotate(20deg);
			-webkit-transform: rotate(20deg);
			bottom:30.5px;
			left:80px;
		}
		.blshl,.blshr{
			background-color:#ff9999;
			height: 16px;
			width:22px;  
			border-radius: 50%;
			position: relative;
			opacity: 0.8;
		}
		.blshl{
			transform: rotate(25deg);
			-webkit-transform: rotate(25deg);
			position: relative;
			top:64px;
			left:17px;
		}
		.blshr{
			transform: rotate(-25deg);
			-webkit-transform: rotate(-25deg);
			position: relative;
			top:46px;
			left:95px;
		}
		.eyeball1,.eyeball2{
			height: 10px;
			width: 10px;
			background-color: white;
			border-radius: 50%;
			position: relative;
			transition:1s all;
			-webkit-transition:1s all;
		}
		.eyeball1{
			left:10px;
			top:10px;
			transform: rotate(20deg);
			-webkit-transform: rotate(20deg);
			
		}
		.eyeball2{
			left:10px;
			top:10px;
			transform: rotate(-20deg);
			-webkit-transform: rotate(-20deg);
		}
		.nose{
			height:17px;
			width: 17px;
			background-color: #4d4449;
			border-radius: 20px 0px 4px;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			position: relative;
			bottom: 30px;
			left:60px;  
		}
		.line{
			background-color: #4d4449;
			height:10px;
			width:2px;
			position: relative;
			transform:rotate(-45deg);
			-webkit-transform:rotate(-45deg);
			left:18.5px;
			top:15px;

		}
		.m,.mm{
			background-color: #4d4449;
			height:8px; 
			width: 15px;
			border-radius:0 0 8px 8px;
			position: relative;

			 
		}
		.m{
			bottom: 21px;
			left:53px;
		}
		.m1{
			height: 6px;
			width: 13px;
			background-color: white;
			border-radius: 0 0 10px 10px;
			position: relative;
			left:1px;
			bottom:1px;
		}
		.mm{
			bottom: 30px;
			left:68.5px;
		}
		.handl,.handr{
			background-color:#4d4449;
			height:45px;
			width: 35px;
			border-radius:10px 10px 30px 30px;  
			z-index: 2;
			transition:1s all;
			-webkit-transition:1s all;
		}
		.handl{
			position: relative;
			bottom: 140px;
			left: 50px;
		}
		.handr{
			position: relative;
			bottom:185px;
			left:250px;
		}
		.pawl,.pawr{
			background-color: #4d4449;
			height: 50px;
			width: 50px;
			border-radius: 40px 40px 20px 20px;
			position: relative;
			z-index: 2;

		}
		.pawl{
			top:170px;
			left:80px;
		}
		.pawr{
			top:120px;
			left:200px;
		}
		.p1{
			background-color: white;
			height: 25px;
			width: 30px;
			position: relative;
			top:21px;
			left:10px;
			border-radius: 25px 25px 10px 10px;
		}
		.p2,.p3,.p4{
			background-color:white;
			height: 10px;
			width: 10px;
			border-radius: 50%;
			position: relative;
		}
		.p2{
			bottom:13px;
			left:9.5px;
		}
		.p3{
			bottom:17.2px;
			right:2.5px;
		}
		.p4{
			bottom:27.2px;
			left:22px;
		}
		span{
			color:#4d4449;
    		font-family: 'Ubuntu', sans-serif;
		}
		input{
			color: #4d4449;
			width: 180px;
			border:none;
			outline: none;
			border-bottom: 1px solid #4d4449;
			font-family: 'Ubuntu', sans-serif;
		}
	.fa{
		color:#4d4449; 
		font-size: 20px;
		outline: none;
	}
	[type="button"]{
		background-color: #3F51B5;
		outline: none;
		width:initial;
		border:none;
		color: white;
		font-family: 'Ubuntu', sans-serif;
		font-size: 23px;
		text-transform: uppercase;
		padding: 5px;
		position: relative;
		left:72px;
	}


body
{
	margin: 0;
}

.bg1,.bg2
{
	position: fixed;
	height: 770px;
}
.bg1
{
	z-index: -1;
	width: 30%;

	background:#03A9F4;
	display: flex;
	box-shadow: 10px  0px 30px 5px #010c;
	transition: all 1s;
	animation:swipe 1.5s ease;
	/*border-right: 25px solid #3F51B5;*/
	box-shadow: 3px 0 10px 4px #0009;
}

#mm
{
	/*border-right: 10px solid red;*/
	
}

#bb
{
	width: 30%;
	background: #3F51B5;
	animation: swipe 2.5s ease;
	transform: translate(0px,0) scale(1.12);

}
#bbb
{
	width: 30%;
	background: #9e9e9e;
	animation: swipe 2.9s ease;
	transform: translate(0px,0) scale(1.2);

}


.bg2
{
	z-index: -2;
	width: 100%;
	background:linear-gradient(#000a,#0009),url("./pics/back1.jpg");
	background-size: cover;
	text-align: center;
	color: #fffa;
	font-size: 3em;
	box-shadow:inset -0px  0px 30px 15px #111011db;
}

.bg2>h1
{
	transform: translate(0,300px);
}

.bg2>p
{
	transform: translate(230px,260px);
}

@keyframes swipe
{
	0%{width: 90%;}
	50%{width: 3%;}
	100%{width:30%;}
}

@keyframes slideup
{
	from{ transform: translate(0,100px); opacity: 0; }
	to{ transform: translate(0px,-10px); opacity: 1; }
}