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

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

* {
  margin: 0;
}

html {
	background-image: url(./images/numblock.png);
}

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

h1{
	margin-top: 25px;
	font-size: 30px;
}

#form {
	background-color: lemonchiffon;
	border: solid 2px #111;
	border-radius: 11px;
	text-align: center;
	margin: 25px auto;
	padding: 20px;
	width: 500px;
}

input[type=text] {
	width: 86%;
	font-size: 18px;
	margin: 10px 20px;
	padding: 5px 10px 3px;
	border: solid 1px #111;
}

.buttons	{
	width: 86%;
	margin: 20px auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

input[type=button] {
	width: 90px;
	height: 30px;
	outline: none;
	font-size: 18px;
	padding: 2px 10px;
	border: solid 1px #111;
	box-shadow: 3px 3px 7px #777;
	background-color: lightskyblue;
}

input[type=button]:hover {
	background-color: #fff;
	color: crimson;
}

input[type=button]:active {
	box-shadow: 3px 3px 7px transparent;
}

.messages {
	width: 86%;
	font-size: 18px;
	text-align: left;
	margin: 35px auto 20px;
}

span {
	color: crimson;
}