/* This @import rule lets us use a font supplied by Adobe called Ten Oldstyle. This is a service I pay for... for a free alternative, look at Google Fonts or the League of Moveable Type. —JN */

@import url("https://use.typekit.net/kpn5wle.css");

* {
	box-sizing: border-box; 
	font-family: 'ten-oldstyle';
}

html {
	background-color:#f1bcf5;
}


/* See https://www.w3schools.com/css/css_pseudo_classes.asp for more info on the next four selectors. */ 

a:hover {
	color: lime;
}

a:link {
	color: teal;
}

a:visited {
	color: darkgreen;
}

a:active {
	color: pink;
}


/* The following 6 lines make sure that images and other embedded objects are centered and stay inside the body element. */
picture, img, object, video {
	display: flex;
	margin: 1em auto;
	max-width: 100%;
	height: auto;
}

audio {
	display: flex;
	margin: 1em auto;
	width: 80%;
}


img, svg {
	width: 80%;
	background-color: white;
	margin: 4em auto;
	padding: 1em;
	rotate: -10deg;
	border: thin red solid;

	/* See Robbins chapter 20 for info
	on transitions. ↓) */
	transition-property: rotate,border;
	transition-duration: 0.3s;
}

img:hover {
	rotate: 10deg;
	border: thick dotted orange;
}

.nav-buttons li a {
	color: black;
}

html {
		background-color: violet;
}

body {
	border: thick red solid;
	border-radius: 2em;
}

/* The next set of rules only apply on extra small devices like phones, where the viewport is 600px or less. */
@media only screen and (max-width: 600px) {
	body {
		background-color: lime;
	}

	body {
		width: 100%;
		border: none;
		border-radius: 0;
		margin: 0;
		padding: 1em 0.5em;
	}
	
	h1 {
		color: blue;
	}
	
	li {
		padding: 1em;
	}
} /* END of <600 px. <-- comments like this can help you from getting lost in your own code! */

/* The next set of rules devices like portrait tablets and large phones, where the viewport is over 600px. */
@media only screen and (min-width: 601px) {
	body {
		background-color: yellow;
	}
	
	body {
		width: 80%;
		max-width: 40em;
		border-radius: 1em;
		background-color: yellow;
		margin: 1em auto;
		padding: 1em 0.5em;
	}
	
	li {
		padding: 0.5em 0;
	}
	
	h1 {
		color: lime;
	}	
} /* END of >600 px. */


/* The next set of rules devices like laptops/desktops, where the viewport is 800px and up. */
@media only screen and (min-width: 800px) {
	body {
		background-color: purple;
	}

	body {
		max-width: 45em;
		border-radius: 3em;
		margin: 3em auto;
		padding: 3em;
	}
	
	h1 {
		color: orange;
	}	
} /* END of >800 px. */

/* The next set of rules devices like large laptops and desktops, where the viewport is 1200px and up. */
@media only screen and (min-width: 1200px) {
	body {
		background-color: orange;
	}

	body {
		max-width: 50em;
		border-radius: 4em;
		background-color: orange;
		margin: 4em auto;
		padding: 4em;
	}
	
	h1 {
		color: green;
	}	
	
} /* END of >1200 px. */