@charset "UTF-8";
/* CSS Document */

	/* @media screen and max-width 600px{ */
	body {
		color: #222;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 16px;
		/*max-width:600;*/
		margin:0 auto; 
	}
	header {
		background: url("city-skyline-1000x500.jpg");
		background-size: auto auto;
		background-repeat: no-repeat;
		height: 320px;
		padding: 24px;
	}
	main {
		padding: 24px;
	}
	footer {
		background-color: #CAD2E2;
		padding:24px;
	}
	h1 {
		/* Minor 3rd/H1 Minor 3rd */
		font-size: 3rem /*48px*/;
		font-weight: 700;
		line-height: 1.2;
		text-shadow: 0px 0px 10px #ffffff;
		text-align:left;
		margin: 0;
	}
	p {
		line-height: 1.5;
	}
	a {
		color: #222;
		text-decoration: underline;
	}
	.photo {
		max-width: 250px;
		margin: auto;
	}
	.photo img {
		max-width: 100%;
	}
	.footerContent {
		line-height: 1.2;
		text-align:center;
	}
	.footerContent p, .footerContent small {
		margin: 0;
	}
	/* } end up to 600px */
	@media screen and (min-width:600px){
		body {
			max-width:1000px;
		}
		header {
			height: 400px;
			padding: 20px 0 0 0;
		}
		main {
			display: grid; 
			grid-template: auto 1fr auto / 2fr 250px;
			gap: 1.5rem;
			padding: 0 24px;
		}
		h1 {
			font-size: 3.8125rem /*90px*/;
		}
		.bio {
			grid-area: 2/1;
			align-self: start;
		}
		.photo {
			grid-area: 2/2;
			align-self: start;
			margin: 0;
			max-width: 100%;
		}
	} /* end min width 600*/
	@media screen and (min-width:700px){
		body {
			max-width:1000px;
		}
		header {
			height: 500px;
		}
		main {
			grid-template: auto 1fr auto / 2fr 300px;
			gap: 3rem;
		}
		footer {
			height: 500px;
			height: stretch;
		}
		.bio {
			grid-area: 2/1;
		}
		.photo {
			grid-area: 2/2;
		}
	}