* { 		box-sizing: border-box; }

body {		background-color:#A71930;
		color: #FED700 ;
		font-family:Verdana, Arial, sans-serif;
		margin: 0; }

#wrapper {	background-color:#A71930; }

header {	background-color: #A71930;
		color: #FED700;
		font-family: Georgia, serif;
		padding: 1em; }

header a {	text-decoration: none;}

header a:link {	color: #FED700; }

header a:visited { color: #FED700; }

header a:hover { color: #90C7E3; }

h1 {		text-align: center;
		font-size: 1.5em;}

h2 {		color: #FFC627;
		font-family: Georgia, serif; }

h3 {		font-family: Georgia, serif;}

nav {		font-size: 1.2em;
		text-align: center;
		background-color:#FED700;
		color: #A71930; }

nav a {		text-decoration: none; }

nav a:link {	color: #5C7FA3; }

nav a:visited { color: #344873; }

nav a:hover { 	color: #A52A2A; }

nav ul {	display:flex;
		flex-direction: column;
		list-style-type: none;
		padding: 0;
		margin: 0; }

nav li {	padding: .5em 1em;
		width: 100%;
		border-bottom: 1px solid #344873; }
		

main {		padding: 0em 0em;
		display:block; }

dt {		color: #002171;
		font-weight: bold; }

.john {		color: #002868;
		font-size: 1.2em; }

#homeimg {	height:400px;
		background-image: url(john.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat; }

#philimg {	height: 300px;
		background-image: url(helping.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat; }

section {	padding-left: .5em;
		padding-right: .5em; }

#mobile {	display: inline; }

#desktop {	display: none; }

footer {	background-color: #A71930;
		color: #FED700
		font-size: .70em;
		font-style: italic;
		text-align: center;
		padding: 1em; }


table { 	margin: auto;
		border: 1px solid #000000;
		width: 90%; 
		border-collapse: collapse;
		background-color: #CE5C17;
		color: #002868; }

td,th {		padding: 5px;
		border: 1px solid #ffffff; }

td {		text-align: center; }

.text {		text-align: left; }

tr:nth-of-type(even) {		background-color: #FED700; }

form { 		display: flex;
		flex-direction: column;
		padding-left: 1em;
		width: 80%; }

input, textarea { margin-bottom: .5em; }


@media (min-width: 600px) {
		
	h1 {		font-size: 2em;
			letter-spacing: .25em; }
	
	nav ul { 	display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			padding-right: 2em; }
	
	nav li { 	width: 12em;
			border-bottom: none; }
	
	section {	padding-right: 2em;
			padding-left: 2em; }
	
	#flow { 	display: flex;
			flex-direction: row; }

	#mobile { 	display: none; }

	#desktop { 	display: inline; }
	
	#homeimg {	height: 390px;
			width: 390px;
			float: left;
			background-size: 100% 100%; }
	
	#philimg {	background-size: 100% 100%; }
	
	form {		width: 60%;
			display: grid;
			gap: 1em;
			grid-template-columns: 10em 1fr; }

	input[type="submit"] {	grid-column: 2 / 2;
				width: 9em; }

}

@media (min-width: 1024px) {
	
	body {		background-image: linear-gradient(to bottom, #A71930 20%, #FED700 60%, #A71930 100%); }
	
	
	nav ul { 	padding-right: 10%;
			padding-left: 10%; }
	
	#wrapper {	margin: auto;
			width: 80%; }
	#homeimg {	height: 390px;
			width: 390px;
			float: left;
			background-size: 100% 100%; }
}