/* the styles for the elements */
body {
	font-family: cursive;
    font-size: 111%;
	color: #E220D6;
	background-color: #D6FF00;
	
} /* I am so sorry for your eyes.*/

/* the styles for the header */

header img {
	float: left;
}

/* the styles for the main content */
main {
	clear: left;
	text-shadow: -2px 8px 6px #FF0000; /* i tried to make it look like it was bleeding haha */
}
main h1 {
	font-size: 150%;
	color: #B1C4F9;
	font-weight: 100;
	font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif

}
main h2 {
	color: var(--global-color-1); 
	font-size: 170%;
	text-indent: 30px;
	font-family: fantasy;
	font-weight: 900;
	font-style: oblique;



}
main h3 {
	color: #FF5300;
	font-size: 130%;
	text-indent: 30px;

}
.shadow{
	text-shadow: 3px 3px 2px var(--global-color-1);
}

a:hover{
	color: #173DAD;
	font-style: italic;
}
a:focus{
	font-style: italic;
	color:#173DAD /* I don't know how to condense the 'hover' and 'focus' lines into the same element,
	so I'm keeping them seperate. */
}
:root{ --global-color-1: #800000; } /* Should this be at the top, or bottom? Or is it coders' preference? */

/* the styles for the footer */
footer{
	text-align: center;
	text-decoration: overline;
}