/* variables */
:root {
	--primary-color: rebeccapurple;
	--background: aliceblue;
	--light: white;
}

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

/* the styles for the elements */
html {
	background-color: var(--background);
}
body {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 90%;
    margin: auto;
    border: 10px double var(--primary-color);
    background-color: var(--light);
}

main { padding: 1.5em; }
h2, h3, p { padding-top: .75em; }
ul, blockquote { padding-top: .5em; }
ul { margin-left: 1.25em; }
li { padding-bottom: .25em;} 

h1 {
	font-size: 150%;
	color: var(--primary-color);
}
h2 { font-size: 125%; }
h3 { font-size: 115%; }

img {
	float: left;
	margin: .5em 1em .5em 0;
	& + p {     /* paragraph that's adjacent sibling of an image */
		padding-top: .25em; /* override default padding for paragraph */
	}
	& ~ h2 {    /* heading that's subsequent sibling of an image */
		clear: left;
	}
}
cite {
	color: var(--primary-color);
	font-style: normal;
	font-weight: bold;
}

/* the styles for the footer */
footer {
	border-top: 3px solid var(--primary-color);
	padding-bottom: .75em;
	& p {
		font-size: 90%;
		font-weight: bold;
		text-align: center;
	}
}