*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}
body{
	background: #F2F2F2;
	display: flex;
	min-height: 85vh;
}
form{
	margin: auto;
	width: 90%;
	max-width: 500px;
	background: #000000;
	padding: 30px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 20px;
}
h1{
	text-align: center;
	margin-bottom: 20px;
	color: #000000;
}
a{
	text-align: center;
	margin-bottom: 20px;
}
h3{
	text-align: center;
	margin-bottom: 3px;
	color: #4c9d2a;
}
/*Don't forget to add Font Awesome CSS : "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"*/
input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}
input[type="password"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="password"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}
.inputWithIcon input[type="text"] {
  padding-left: 40px;
}
.inputWithIcon input[type="password"] {
  padding-left: 40px;
}
.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i {
  color: dodgerBlue;
}
.inputWithIcon input[type="password"]:focus + i {
  color: dodgerBlue;
}
.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}
.inputWithIcon.inputIconBg input[type="password"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}
input[type="submit"]{
	display:block;
	padding: 10px;
	width: 100%;
	margin: 25px 0;
	font-size: 15px;
}
input[type="submit"] {
	background: linear-gradient(#0080FF,#2E9AFE);
	border: 0;
	color: white;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: 50;
}
input[type="submit"]:hover{
	opacity: 1;
}
input[type="submit"]:active{
	transform: scale(0.95);
}

@media (max-width 768px){
	form{
		width: 75%;
	}
}
@media (max-width 480px){
	form{
		width: 95%;
	}
}