@font-face {
	font-family: Code;
    src: url('/css/fonts/code-bold.otf') format('opentype');
	font-weight: bold;
}
body {
	padding: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
h1 {
	font-family: Code, Arial, Sans-Serif;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
	font-size: 64px;
	color: #000;
}
h1 span {
	position: relative;
	top: 0;
	left: 2px;
}
@media screen and (min-width: 480px) {
	h1 {
		font-size: 96px;
		letter-spacing: 3px;
	}
	h1 span {
		left: 3px;
	}
}
h2 {
	text-align: center;
	font-size: 24px;
	color: #333;
}
body > p {
	font-size: 14px;
}
form {
	width: 370px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
}
.field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}
.field.r {
	flex-direction: row-reverse;
}
.field p:first-child {
	flex-grow: 0;
	flex-shrink: 4;
	flex-basis: 200px;
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 8px;
}
.field label {
	font-size: 14px;
	font-weight: bold;
}
.field em {
	font-weight: normal;
	font-style: italic;
}
.field .rq {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.field .rq strong {
	font-weight: normal;
	font-size: 16px;
}
.field input {
	padding: 15px 5px;
	border: 1px solid #ccc;
	border-radius: 2px;
	width: 100%;
	box-sizing: border-box;
	font-size: 20px;
	text-align: center;
}
.field input[type="email"],
.field input[type="text"] {
	font-size: 16px;
	text-align: left;
}
.field input:focus {
	outline: 1px solid #928b4c;
}
.field p:last-child {
	flex-grow: 0;
	flex-shrink: 3;
	flex-basis: 150px;
	text-align: center;
}
.field img {
	max-width: 100%;
	max-height: 150px;
}
.field.fw {
	flex-direction: column;
	align-items: start;
	gap: 8px;
}

button {
	padding: 10px 0;
	width: 100%;
	background-color: #90760f;
	color: white;
	border: 0 none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
}
button:focus,
button:hover {
	background-color: #928b4c;
	outline: 0 none;
}

/*
form { width: calc(100% - 40px); max-width: 400px; margin: auto; text-align: left; }
.field { display: flex; align-items: center; justify-content: start; margin-bottom: 15px; }
*/