@charset "utf-8";
/* CSS Document */
body{
	font-family: Arial, Helvetica, sans-serif;
}
header{
	background: #787878;
	color:#ffffff;
	text-align:center;
	border-bottom: #ff0000 thick double;
	padding: 25px 0 10px 0;
	font-family: "Times New Roman", Times, serif;
	text-shadow: 1px 1px 1px black;
	
}

h3{
	color: #6a5acd;
	font-family: "Times New Roman", Times, serif;
}

section{
	margin: 0 25px 0 25px;
}

.work{
	border-right: medium dotted #0000ff;
	max-width: 50%;
	min-height: 250px;
	padding-top: 35px;
	text-align: left;
	width: 100%;
}

.examples{
	border-top: medium solid #0000ff;
	text-align: center;
	color: #787878;
}

#words{
	border: medium solid #ff0000;
	text-align: left;
	margin-bottom: 5px;
}

.error{
	padding-left: 10px;
	color: red;
}

#calc{
	background: #D45791;
	color: white;
	border: thin solid #1E1016;
	font-family: "Times New Roman", Times, 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;
}

.container{
	width: 50%;
	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: "Times New Roman", Times, 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;
}