@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Case Problem 1
   
   Star Dust Stories Design Styles
   Author: Regan Dobbins
   Date: 2/27/2018     

   Filename: sd_effects.css

*/

/* HTML Styles */
 html {
	 background-image: url(sd_back1.png); 
	 background-size: 100%;
	 background-attachment: fixed;
 }



/* Body Styles */
body {
	background-image: url(sd_back1.png);
}
body {
   background: url(sd_back2.png),
               radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),  
               radial-gradient(circle closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%),
               radial-gradient(closest-side at 10% 20%, white 20%, rgba(0, 0, 0, 0) 45%),
               radial-gradient(5% 5% at 90% 10%, white 15%, rgba(0, 0, 0, 0) 40%), 
               rgb(151, 151, 151);
   box-shadow: rgb(31, 31, 31) 30px 0px 45px,  
               rgb(31, 31, 31) -30px 0px 45px;
}

 
	
	



/* Navigation List Styles */

body > header a          
{
 border: 5px outset rgb(211, 211, 255);
}




/* Section Left Styles */
/* create a style rule for the h1 heading on the left section 
article that changes the text color to rgb(211, 211, 211) and 
adds a black text shadow with 0px offsets and a blur of 5 px*/
article h1 {
	
	text-shadow: rgb(0, 0, 0) 0px 0px 0px,
				rgb(211, 211, 211) 0px 0px 5px;
}
/* the image is marked "mportrait", in the section left styles
section, create a style rule for this object that modifies the
appearance of this image by applying the following filters: a drop
shadow filter with a horizontal offset of -15 px, a blur of 5 px, 
and a color of rgba(51, 51, 51, 0.9); a grayscale filter with a value
of 0.7; and an opacity filter with a value of 0.6 */
figure#mportrait {
	-webkit-filter: drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9);
	filter: drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9);
	-webkit-filter: grayscale(-0.7);
	filter: grayscale(-0.7);
	-webkit-filter: opacity(0.6);
	filter: opacity(0.6);
	transform: rotateY(180);
}

	



/* Footer Styles */
/* create a style rule for the footer element that adds a 2-pixel
solid border to the top edge of the footer with a color value of 
rgb(171, 171, 171)*/
footer {
	border-top: 2px solid rgb(171, 171, 171);
}