.arvo-regular {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: normal;
}

.arvo-bold {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: normal;
}

.arvo-regular-italic {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: italic;
}

.arvo-bold-italic {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: italic;
}

.source-sans-3-hollo {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

#main-bod {
	background: rgb(34, 193, 195);
	background: -moz-linear-gradient(0deg, rgba(34, 193, 195, 1) 0%,
		rgba(253, 187, 45, 1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(34, 193, 195, 1) 0%,
		rgba(253, 187, 45, 1) 100%);
	background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%,
		rgba(253, 187, 45, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3",
		endColorstr="#fdbb2d", GradientType=1);

}

#main-bod2 {
	
	background: rgb(34,193,195);
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(144,190,120,1) 50%, rgba(166,189,105,1) 60%, rgba(253,187,45,1) 100%);
}

#main-body {
	
 	 animation: backgroundAnimation 20s infinite alternate;

}

@keyframes backgroundAnimation {
  0% {
 background: rgb(125,231,235);
background: linear-gradient(0deg, rgba(125,231,235,1) 0%, rgba(195,203,99,1) 59%, rgba(253,219,45,1) 99%);
  }
  100% {
	background: rgb(163,227,231);
background: linear-gradient(0deg, rgba(163,227,231,1) 0%, rgba(195,203,99,1) 59%, rgba(237,208,60,1) 92%);

  }
}

.prompt{
		
	    margin: 2em;
	    /* animation: slidearound 15s infinite alternate; */
}
@keyframes slidearound {
 	0%{
 	margin-left: 2em;
 	}
 	100%{
 	margin-left: 3em;
 	}
}
/*
background: 
rgb(34, 193, 195);
    background: -moz-linear-gradient(0deg, 
rgba(34, 193, 195, 1) 0%, 
rgba(253, 187, 45, 1) 100%);
    background: -webkit-linear-gradient(0deg, 
rgba(34, 193, 195, 1) 0%, 
rgba(253, 187, 45, 1) 100%);
    background: linear-gradient(0deg, 
rgba(34, 193, 195, 1) 0%, 
rgba(253, 187, 45, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#22c1c3", endColorstr="#fdbb2d", GradientType=1);

  background: 
rgb(34,193,195);
    background: linear-gradient(0deg, 
rgba(34,193,195,1) 0%, 
rgba(144,190,120,1) 50%, 
rgba(166,189,105,1) 60%, 
rgba(253,187,45,1) 100%);
 */
 
 @keyframes headerAni {
	0% {
			background: #c18716;
	        width: 3em;
			height: 3em;
			border-radius: 3em;
		}
		80% {
			
		}
		100% {
		background: #c18716;
		width: 4em;
		height: 4em;
		border-radius: 4em;
		}
 }
#heading1 {
	background: #c18716;
	width: 3em;
	height: 3em;
	border-radius: 3em;
	
	margin-top: 2em;
	margin-left: 3em;
	padding: 2ex;
	border: 1px;

	
	animation: headerAni 15s infinite alternate; 
}

.color {
	width: 99%;
	background: rgb(181, 217, 14);
	background: -moz-linear-gradient(90deg, rgba(181, 217, 14, 1) 0%,
		rgba(34, 145, 86, 1) 35%, rgba(0, 212, 255, 1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(181, 217, 14, 1) 0%,
		rgba(34, 145, 86, 1) 35%, rgba(0, 212, 255, 1) 100%);
	background: linear-gradient(90deg, rgba(181, 217, 14, 1) 0%,
		rgba(34, 145, 86, 1) 35%, rgba(0, 212, 255, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b5d90e",
		endColorstr="#00d4ff", GradientType=1);
}

.add-form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	/*  margin: .1ex; */
	background-color: palegoldenrod;
}

.form-holder {
	display: flex;
	width: 15em;
	margin: .1ex;
	padding: .1ex;
}

.message {
	color: red;
	font-size: 1.5em;
	margin: 1em;
	text-align: center;
	background-color: palegoldenrod;
}

.graphimg {
	width: 50%;
	scale-factor: fit;
}

input {
	margin-left: 1ex;
	margin-right: 1ex;
}

p {
	margin-top: .5ex;
	margin-bottom: .5ex;
}