style.css

*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.wrapper{
	text-align: center;
	font-size: 1rem;
	background: #fff;
	font-family: arial, sans-serif;
	color: rgb(0,0,0,0.80);
	display: flex;
	min-height: 100vh;
    min-width: 100vw;
	flex-direction: column;
	justify-content: space-between
}
img{
	max-width: 100%;
	height: auto;
}

/*---navbar----*/

nav ul{
	display: flex;
	justify-content: flex-end;
	padding: 1rem;
	list-style: none;
	align-items: center;
	font-size: .9rem;
}
nav li{
	margin-right:1rem;
}
a{
	text-decoration: none;
	color: rgb(0,0,0,0.70);
}
 a:hover,
 a:focus{
	color: #696969;
	text-decoration: underline;
}

.btn{
	padding:0.45rem 0.7rem;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.1em;
	background: linear-gradient(#4683ea, #4387fd);
	border:#4285f4;
	border-radius: 0.1rem;
}
.fa:hover,
.fa:focus{
	color: #000;
}

/*-----main-----*/

.main{
	padding: 8rem;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.frm{
	padding: 0.2rem;
}
.frm input{
	margin: 1.4rem  1rem;
	height: 1.8rem;
	width: 35rem;
	border-radius: 2rem;
	border: 1px solid #eee9e9;
	font:small;
	padding: 1.5rem;
}
.frm input:hover,
.from input:focus{
	box-shadow: 0.5px 0.5px 3px rgb(0,0,0,.2);
}

.frm_btn{
	margin: 0.8rem 0.3rem;
	padding:0.5rem 1rem;
	border: 1px solid transparent;
	color: rgb(0,0,0,0.50);
	font-size:0.9rem;
	border-radius: 5px;
}
.frm_btn:hover{
	border: 1px solid #cdc9c9;
	color:rgba(0,0,0,0.8);
	cursor: pointer;
}

/*----footer----*/

.base{
    padding: 1rem;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	font-size:.8rem;
	background: rgb(244,244,244);
}
.base a{
	margin: 0 0.8rem;
}