/* custom properties for theme colors */
:root {
	--primary-color: orange;
	--accent-color: green;
	--light: white;
	--dark: black;
	--medium: lightgray;
	--background: #F5DEB3;
}

/* reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* default styles */
body  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 3px solid var(--dark);
	font-size: calc(90% + 0.3vw);
	line-height: 1.5;
}
a {
    font-weight: bold;
}
a:link, a:visited { 
    color: var(--primary-color); 
}
a:hover, a:focus { 
    color: var(--accent-color);
}
ul {
	margin-left: 2em;
}

/* header */
header { 
    padding: 1em;
	line-height: 1.2;
	text-align: center;
    background-image: linear-gradient(
		45deg, 
		var(--light) 0%, 
		var(--primary-color) 100%);
	& img { 
		width: clamp(50px, 10%, 85px);
		float: left; 
	} 
	& h2 {
		font-size: 230%;
		font-family: "Creepster", Verdana, Arial, Helvetica, sans-serif;
	}
	& h3 {
		font-size: 125%;
	}
} 

/* main */
main {
	clear: both;
	padding: .5em 1.5em;
	display: flex;
	flex-direction: column;
	& h1 { 
		font-size: 140%;
	}
	& h1::first-letter { 
		font-size: 240%;
	}
	& h2 {
		font-size: 125%;
	}
	& h3 {
		font-size: 110%;
	}
	& h1, h2, h3 {
		padding-bottom: .35em;
	}
	& p {
		padding-bottom: 1em;
	}
	& .featured-product {
		width: min(100%, 154px);
	}
}

/* aside */
aside {
	padding: 1em;
	background-color: var(--primary-color);
	border-radius: 10px;
	margin-bottom: .5em;
}

/* footer */
footer { 
	padding: 1em;
	border-top: 2px solid var(--dark);
	& p {
		font-size: 90%;
		text-align: center;
	}
} 

/* media queries */
@media only screen and (min-width: 1000px) {
	html {
		background-image: url("../images/bats.gif");	
	}

	body {
		background-color: var(--light);
		box-shadow: 0 3px 6px;
	}
}

@media only screen and (min-width: 810px) {
	body {
		width: min(90%, 1000px);
		margin: auto; 
	}
	header {
		text-align: left;
		background-image: linear-gradient(
			45deg, 
			var(--light) 0%, 
			var(--primary-color) 75%, 
			var(--dark) 100%);
		& img {
			padding-right: 1em; 
		}
	}
	main {
		flex-direction: row-reverse;
		& section:first-child {
			flex-basis: 70%;
			margin-left: 2em;
		}
		& section:last-child {
			flex-basis: 30%;
			padding-top: 1em;
		}
	}
}