/* Importing fonts from Google */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Reseting 
	 <color name="colorKaki">#CACA32</color> 
    <color name="colorAzul1">#27455E</color>
    <color name="colorAzul2">#355D72</color>
*/
html {
	min-height: 80%;
	max-height: 100%;
	position: relative;
}

body {
	margin: 0;
	margin-bottom: 0px;
	 
}

footer {
	margin-bottom: 0;
	background-color: #e0e0e0 !important;
	position: absolute;
	bottom: 0;
	width: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}


.wrapper {
	max-width: 350px;
	min-height: 500px;
	margin: 40px auto;
	padding: 20px 15px 15px 15px;
	background-color: #ecf0f3;
	border-radius: 20px;
	background-size: cover;
	box-shadow: 10px 10px 20px #caca32, -10px -10px 20px #27455E;
}

.logo {
	width: 80px;
	margin: auto;
}

	.logo img {
		width: 100%;
		height: 80px;
		object-fit: scale-down;
		border-radius: 50%;
		box-shadow: 0px 0px 3px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaa7, -8px -8px 15px #fff;
	}

.wrapper .name {
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 1.3px;
	padding: 10px;
	font-family: montserrat_extra_bold;
	color: #355D72;
	font-size: xx-large;
}

.wrapper .form-field input {
	width: 100%;
	display: block;
	border: none;
	outline: none;
	background: none;
	font-size: 1.2rem;
	font-family: montserrat_extra_bold;
	color: #666;
	padding: 15px 15px 10px 10px;
	/* border: 1px solid red; */
}

.wrapper .form-field {
	padding-left: 10px;
	margin-bottom: 20px;
	border-radius: 20px;
	box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}

	.wrapper .form-field .fas {
		color: #555;
	}

.wrapper .btn {
	box-shadow: none;
	width: 100%;
	height: auto;
	background-color: #caca32;
	color: #fff;
	font-family: montserrat_extra_bold;
	font-size: large;
	border-radius: 25px;
	box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
	letter-spacing: 1.3px;
}

	.wrapper .btn:hover {
		background-color: #27455E;
	}

.wrapper a {
	text-decoration: none;
	font-size: 0.8rem;
	color: #03484d;
}

	.wrapper a:hover {
		color: #039BE5;
	}

@media(max-width: 380px) {
	.wrapper {
		margin: 20px 10px;
		padding: 40px 15px 15px 15px;
	}
}