@font-face {
    font-family: 'Bitstream Vera Sans Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Bitstream Vera Sans Mono'), 
		url('../fonts/bitstream-vera-sans-mono.web/VeraMono.woff') format('woff'),
		url('../fonts/bitstream-vera-sans-mono.web/VeraMono.ttf') format('truetype');
}

* {
	box-sizing: border-box;
}

BODY {
	margin: 0.75rem 0;
	font-family: 'Bitstream Vera Sans Mono', monospace;
	font-style: normal;
    font-weight: 400;
	
	background-color: #24272E;
	color: #BBC1CB /* #A1A9B7 */;
	
	font-size: 14px;
	line-height: 1.4rem;
}

A {
	color: #00A4ED;
}

HR {
	border: none;
	height: 1px;
	/* Set the hr color */
	color: #00A4ED;  /* old IE */
	background-color: #00A4ED;  /* Modern Browsers */
}


H1 {
	margin-top: 3.5rem;
}

DL DT,
.form-field LABEL {
	display: block;
	color: #636B7A;
}

DL DD,
.form-field INPUT,
.form-field TEXTAREA,
.form-field SMALL {
	margin-left: 3rem;
}

DL DD,
.form-field {
	margin-bottom: 0.7rem;
}

.body-container {
	margin: 0 auto;
	max-width: 56rem;
	padding: 0 0.75rem;
}

.header {
	margin-bottom: 0.75rem;
}

.header IMG {
	max-width: 12rem;
	display: block;
}




.form-field {
	width: 30rem;
	max-width: 100%;
}

.form-field SMALL {
	color: #FC6900;
}

.form-field INPUT,
.form-field TEXTAREA,
.form-field BUTTON {
	border: #00A4ED solid 2px;
	background-color: #D7DBE0;
	border-radius: 0.45rem;
	padding: 0.5rem;
	
	transition: box-shadow 0.3s;
}

.form-field INPUT:focus-visible,
.form-field TEXTAREA:focus-visible,
.form-field BUTTON:hover {
    outline: none;
    border-color: #00A4ED;
    box-shadow: 0 0 10px #00A4ED;
	
	
}

.form-field INPUT,
.form-field TEXTAREA {
	width: calc(100% - 3rem);
}

.form-field.action {
	text-align: right;
}


.form-field.nickname {
	position: absolute;
	top: -1000px;
}