@font-face {
	font-family: "silkscreen";
	src: url('/fonts/Silkscreen-Regular.ttf') format('truetype');
}

@font-face {
	font-family: "silkscreen-bold";
	src: url('/fonts/Silkscreen-Bold.ttf') format('truetype');
}

body {
	margin: 0;
	padding: 0;
}

header {
	background-color: lightblue;
}

.main-title {
	margin: 0;
	text-align: center;
	font-family: "silkscreen-bold";
	font-size: 3.5em;
}

footer {
	background-color: lightblue;
	padding: 0.5em;
	padding-left: 1em;
}

.main-content {
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 20px;
	margin-bottom: 20px;
}

input[type="text"] {
	font-family: "silkscreen";
	font-size: 1.2em;
	padding: 0.6em 1em;
	border-radius: 4px;
	border: 2px solid lightblue;
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

input[type="text"]:focus {
	outline: none;
	border-color: blue;
}

.field-label {
	font-family: "silkscreen";
	font-size: 1.2em;
	display: block;
	text-align: center;
	margin-bottom: 8px;
}

button {
	font-family: "silkscreen";
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.5em;

	border-radius: 4px;
	background: lightblue;
	border: none;
	padding: 1em 2em;
	box-shadow: 0 0 10px -2px;

	display: block;
	margin-top: 12px;
	margin-bottom: 12px;
	margin-left: auto;
	margin-right: auto;

	&:hover {
		background: blue;
		transition: background-color 0.6s ease;
	}

	&:active {
		background: green;
		transition: background-color 0s;
	}
}