/**************
|  style.css  |
**************/

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

html,
body {
	margin: 0;
	padding: 0;
}

html {
	background-color: lightskyblue;
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	max-height: fit-content;
	text-align: center;
	color: #111;
}

#form {
	box-shadow: 3px 3px 7px #555;
	background-color: #eee;
	border: solid 2px #111;
	border-radius: 4px;
	text-align: center;
	margin: 50px auto;
	padding: 25px;
	width: 450px;
}

.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top {
	margin: 0 22px;
	outline: solid 1px transparent;
}

h1 {
	color: darkblue;
	font-size: 36px;
	flex: 1;
	margin: 0;
	padding: 0;
}

#messages {
	font-size: 19px;
	text-align: justify;
	line-height: 26px;
	margin-top: 5px;
	padding: 10px 0 10px 5px;
}

span {
	color: crimson;
}

input::placeholder {
	color: #222;
}

input[type=text],
input[type=password] {
	padding: 5px 10px;
	margin: 10px 20px;
	font-size: 15px;
	width: 90%;
	box-sizing: border-box;
}

#fname,
#lname {
	flex: 1;
}

#city {
	flex: 4;
}

#state {
	flex: 1;
}

#username,
#password {
	flex: 5;
}

#bot {
	width: 90%;
	height: 30px;
	padding: 5px 10px;
	cursor: pointer;
	flex: 2;
}

#bot img {
	height: 100%;
	display: grid;
	place-items: center;
}

hr {
	text-align: center;
	margin: 12px auto 0;
	width: 95%;
}

#mid {
	margin-bottom: 15px;
}

#bottom {
	margin-top: 15px;
}

#submit {
	background-color: lemonchiffon;
	border: solid 1px #111;
	margin: 25px 20px 10px;
	padding: 5px 10px;
	font-size: 15px;
	cursor: pointer;
	flex: 1;
}

#submit:hover {
	color: crimson;
}

#reset {
	background-color: lemonchiffon;
	border: solid 1px #111;
	margin: 25px 20px 10px;
	padding: 5px 10px;
	font-size: 15px;
	cursor: pointer;
	flex: 1;
}

#reset:hover {
	color: crimson;
}

.hover-fix {
	color: rgb(194, 180, 148);
}

.hover-fix:hover {
	color: rgb(194, 180, 148);
}