html
{
font-size: 62.5% !important;
overflow-y: scroll;
scroll-behavior: smooth;
}

*
{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
outline: none;
line-height: 1.3;
}

body
{
font-family: Arial, Verdana, san-serif;
min-height: 80vh;
background: #f7f7f8;
}

img
{
vertical-align: middle;
}

header
{
border-bottom: 0.2rem solid #dddddf;
padding: 1.5rem 0;
text-align: center;
background: #fff;
}

header img
{
height: 3rem;
width: 15.5rem;
}

footer p
{
text-align: center;
font-size: 1.3rem;
color: #505054;
}

#content
{
margin: 10vh auto;
width: 80%;
max-width: 60rem;
padding: 4rem;
background: #fff;
box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.3);
border-radius: 1rem;
text-align: center;
}

h1
{
font-size: 3.5rem;
color: 101012;
}

@media screen and (max-width: 600px) {

	h1
	{
	font-size: 2.6rem;
	}
}

p
{
font-size: 1.6rem;
color: #303034;
margin: 1rem 0 2rem 0;
}

.button
{
margin-top: 1rem;
display: inline-block;
font-size: 1.6rem;
padding: 1.7rem 3rem;
border-radius: 1rem;
background: #2baf11;
color: #fff;
font-weight: bold;
text-decoration: none;
transition: 0.2s background;
}

.button:hover
{
background: #31c613;
}

input,
label,
select,
button,
textarea
{
	margin:0;
	border:0;
	padding:0;
	display:inline-block;
	vertical-align:middle;
	white-space:normal;
	background:none;
	line-height:1;
	
	/* Browsers have different default form fonts */
	font-size:13px;
	font-family:Arial;
}

/* Remove the stupid outer glow in Webkit */
input:focus
{
	outline:0;
}

/* Box Sizing Reset
-----------------------------------------------*/

/* All of our custom controls should be what we expect them to be */
input,
textarea
{
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select
{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Text Inputs
-----------------------------------------------*/

input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week]
{
}

/* Button Controls
-----------------------------------------------*/

input[type=checkbox],
input[type=radio]
{
	width:13px;
	height:13px;
}

/* File Uploads
-----------------------------------------------*/

input[type=file]
{

}

/* Search Input
-----------------------------------------------*/

/* Make webkit render the search input like a normal text field */
input[type=search]
{
	-webkit-appearance:textfield;
	-webkit-box-sizing:content-box;
}

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration
{
	display:none;
}

/* Buttons
-----------------------------------------------*/

button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
	/* Fix IE7 display bug */
	overflow:visible;
	width:auto;
}

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button
{	
	padding:0;
	border:0;
	background:none;
}


/* My form */

form
{
max-width: 30rem;
text-align: left;
margin: 3rem auto 0 auto;
}

.form-section
{
margin: 2.1rem 0;
}

label
{
font-size: 1.4rem;
display: block;
margin-bottom: 0.5rem;
color: #505052;
}

input
{
display: block;
font-size: 1.3rem;
border: 0.1rem solid #606062;
border-radius: 0.4rem;
padding: 1rem 1.3rem;
width: calc(100% - 2.8rem);
}

#submit
{
display: block;
width: 100%;
margin: 0.5rem auto 0 auto;
border: none;
cursor: pointer;
max-width: 20rem;
}

input:focus
{
border-colour: #111;
}

#ta
{
font-size: 1.4rem;
color: red;
}