body {				position: center;
					margin:auto;
					background-color:rgb(246,247,242);
					font-size: 14pt;
					font-weight:400;
					max-width: 760px;
					color:hsl(210, 59%, 30%);}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body {
					max-width: 600px;
					padding: 1em 16px 4em 16px;}
	h1 {			font-size: 28pt;}
	h3 {			font-size: 21pt;}

	#title {		clear:both;}

	#nav {			text-align: left;
					padding-top:1em;
					margin:0;}
					
					
	#nav a {
					margin:0.1em;}
	
	#nav a:first-child {
					margin-left: 0em;}

					
	.photos img {	width: 100%;
					margin: 0 0 .5em 0;
					padding:0;}
					
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	body { 			
					padding: 1em 20px 4em 20px;}
	h1 {			font-size: 32pt;}
	h3 {			font-size: 24pt;}

	#title {		float:left;	}
	
	#nav {			text-align: right;
					padding-top:.6em;
					margin:0;}

	#nav a {
					margin:0.5em;}
	
	#nav a:last-child {
					margin-right: 0em;}
	
	.photos img {	display: inline;
					width: 32%;
					margin: 0 1% 0 0;
					padding:0;}

} 


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	body { 			
					padding: 1em 2em 4em 2em;}
	h1 {			font-size: 36pt;}
	h3 {			font-size: 26pt;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	body { 			
					padding: 1em 2em 4em 2em;}
	h1 {			font-size: 42pt;}
	h3 {			font-size: 26pt;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	body { 			
					padding: 1em 2em 4em 2em;}
	h1 {			font-size: 46pt;}
	h3 {			font-size: 26pt;}
}


#title {			font-weight: 800;
					font-size:20pt;}

#nav {				font-size: 13pt;}

#nav a {			padding: .2em;
					color:hsl(210, 59%, 30%); }
					
#nav a:hover {		background-color: hsl(210, 90%, 86%);}

.selected {			padding: .6em;
					padding-bottom: .3em;
					border-bottom: 2px hsl(210, 59%, 40%) solid;
					color: hsl(210, 59%, 40%);}


h1, #title, #nav {	font-family:'Playfair Display', serif;}

p, title, ul {		font-family:'Inter', sans-serif;}

a {					text-decoration:none;}
h1:visited, a:visited {	
					color:hsl(210, 59%, 30%);}

h3 a, p a {			color:hsl(210, 59%, 30%);}

h3 a:hover, p a:hover {
					background-color: hsl(210, 90%, 86%);}


.photos {			margin:0 0 1.2em 0;
					padding:0;}

p {					text-align:left;
					margin-top:0;
					line-height: 1.5em;}

p a {				text-decoration:underline;}

p a:hover {			text-decoration: none;}

p.comment {			color: #999;
					font-size: 8pt;}

h1 {				font-weight: 1000;
					padding-top: .6em;}


h3 {				font-weight: 600;
					line-height: 1.1em;
					padding-bottom:.3em;
					margin-bottom:0;}

.article-title {	margin-top: 1.3em;
					padding-top: .7em;
					border-top: .5px #c5c7c0 solid;}

.article-photo img, .book-cover img {
					width: 100%;}

.book-cover {		padding-bottom:1.5em;}

.quote {			font-style: italic;
					margin: 1.5em 0 0 0;}

.attribution {		margin: 0;
					color:hsla(210, 59%, 30%, 0.6);
					padding-left: 1.4em;}


p.credit {			margin-top: .5em;
					font-size: 8pt;
					color: #999;}
					
					
					
svg {				display: block;
					height: 12pt;
}