body	{
	background-image: url("csspics/background.png");
	background-size: cover;
}	

#logo	{
	height: auto;
	width: 16%;

}
p	{
	margin-top: 1.5%;
	margin-left: 2%;
}

a	{
	position: absolute;
	padding: 4%;
	width: 7%;
	margin: 0%; 
	//border: solid;
	display: block;
} 

	/*JODIE ITS LATE BUT BASICALLY THE SHIT WORKS WHEN U HAVE IT AS A TAG BUT THE ISSUE IS LIKE CALL OF THE LINKS R OVER EACH OTHER SO FIGURE OUT HOW TO FIX THAT BUT THATS HOW THEY WORK*/



#film	{
	position: relative;
	background-image: url("csspics/filmbutton.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 5%;
	

}

#film:hover	{
	position: relative;
	background-image: url("csspics/filmbutton_c.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 5%;

}

#music	{
	position: relative;
	background-image: url("csspics/musicbutton.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 35%;
}

#music:hover	{
	position: relative;
	background-image: url("csspics/musicbutton_c.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 35%;
}

#writing	{
	position: relative;
	background-image: url("csspics/writingbutton.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 65%;
}

#writing:hover	{
	position: relative;
	background-image: url("csspics/writingbutton_c.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 65%;
}

#misc	{
	position: relative;
	background-image: url("csspics/miscbutton.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 95%;
}

#misc:hover	{
	position: relative;
	background-image: url("csspics/miscbutton_c.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 5% 95%;
}