@charset "utf-8";
/* CSS Document */
body{
	font-family: Helvetica;
}
header{
	background:  #C365B0;
	color:#ffffff;
	text-align: center;
	border-bottom: #3B012C thick double;
	padding: 25px 0 10px 0;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 1px 1px 1px black;

}
h3{
	color: #B35B84;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
section{
	margin: 0 25px 0 25px;
}
.work{
	display: grid;
	grid-area: 2/1;
	justify-items: center;
	border-right: medium dotted #B35B84;
	
	min-height: 250px;
	padding-top: 35px;
	text-align: left;


}
.work2{
	display: grid;
	grid-area: 2/2;
	justify-items: center;
	padding-top: 35px;
	
	
}
.examples{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: .25fr 1fr;
	border-top: medium solid #B35B84;
	text-align: center;
	color: #B35B84;
	
}
.title{
	grid-area: 1/span 2;
}
#words{
	border: medium solid #B72099;
	text-align: left;
	margin-bottom: 5px;
}
.error{
	padding-left: 10px;
	color: red;
}
#calc{
	background: #D45791;
	color: #ffffff;
	border: thin solid #1E1016;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	border-radius: 10px;
	padding: 5px 15px 5px 15px;
	-webkit-transition: all 0.2s ease-in-out 0.0s;
	-o-transition: all 0.2s ease-in-out 0.0s;
	transition: all 0.2s ease-in-out 0.0s;
}
#calc:hover {
	background-color: #ffffff;
	border-color: #520D45;
	margin-top: 3px;
	color: #000000;
}
.results{
	box-shadow: 2px 2px 5px 1px #d3d3d3;
	max-width: 70%;
	margin-top: 10%;
	margin-right: auto;
	margin-left: auto;
	padding: 15px;
}
.count{
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}
.count h2{
	text-align: center;
}
/*<!--calculation app styles-->*/
.container{
	width: 80%;
	border: #520D45 dotted medium;
	border-radius: 25px;
	padding-bottom: 15px;
}
.form-control{
	text-align: left;
	margin-top: 10px;
}
.lgText{
	grid-area: 2/2;
	font-size: 14px;
	font-weight: bold;
}
.calcform{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-gap: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}
#calcApp{
	grid-area: 3/3;
	margin-top: 10px;
	background: #D45791;
	color: #ffffff;
	border: thin solid #1E1016;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	border-radius: 10px;
	padding: 5px 15px 5px 15px;
	-webkit-transition: all 0.2s ease-in-out 0.0s;
	-o-transition: all 0.2s ease-in-out 0.0s;
	transition: all 0.2s ease-in-out 0.0s;
}
#calcApp:hover {
	background-color: #ffffff;
	border-color: #520D45;
	margin-top: 3px;
	color: #000000;
}

.number1{
	grid-area: 1/3;
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
}
.number2{
	grid-area: 2/3;
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
}
.answer{
	display: grid;
	grid-area: 4/ span 4;
	justify-items: center;
	
}
.topContent{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.goals{
	display: grid;
	grid-area: 1/1;
}
.form{
	display: grid;
	grid-area: 1/2;
	justify-items: center;
}
.contactForm{
  width: 85%;
	border: double thick #520D45;
	border-radius: 25px;
	padding: 15px;
	margin: 10px;
}