*{
	font-family: arial;
}

body {
	animation: colorchange 60s linear 1s infinite; /* animation-name followed by duration in seconds*/
	/* you could also use milliseconds (ms) or something like 2.5s */
	-webkit-animation: colorchange 60s linear 0s infinite alternate; /* Chrome and Safari */
	
	display: flex;
	justify-content: center;
}

@keyframes colorchange {
	0%   {background: #d32f2f;}
	17%  {background: #7b1fa2;}
	33%  {background: #303f9f;}
	50% {background: #0288d1;}
	66% {background: #239b56;}
	83% {background: #f9a825;}
	100% {background: #e64a19;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ {
	0%   {background: #d32f2f;}
	17%  {background: #7b1fa2;}
	33%  {background: #303f9f;}
	50% {background: #0288d1;}
	66% {background: #239b56;}
	83% {background: #f9a825;}
	100% {background: #e64a19;}
}


#content{
	margin: 5% auto;
	width: 50%;
	min-width: 500px;
	padding: 0px;
	display: flex;
	flex-flow: column nowrap;
	background: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#header{
	padding: 15px 50px;
	background: #dddddd;
}

#title{
	font-size: 18pt;
}

#form{
	margin: 10px 5%;
	padding: 15px;
}

.field{
	box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 7px;
	width: 100%;
	margin: 5px 0 0 0;
	font-size: 11pt;
}

.label{
	font-weight: bold;
	font-size: 10pt;
}

.line{
	margin: 0 0 15px 0;
}

#description{
	resize: none;
}