@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Case Problem 1
   
   Star Dust Stories Design Styles
   Author: Angel Guzman 
   Date: 3/8/2026     

   Filename: sd_effects.css

*/

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


/* Body Styles */
body {
   background-image:
      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(circle closest-side at 10% 20%,
         white 20%,
         rgba(0,0,0,0) 45%),
      radial-gradient(ellipse 5% 5% at 90% 10%,
         white 15%,
         rgba(0,0,0,0) 40%);
   
   background-color: rgb(151,151,151);

   box-shadow:
      30px 0px 45px rgb(31,31,31),
     -30px 0px 45px rgb(31,31,31);
}


/* Navigation List Styles */
body > header a {
   border: 5px outset rgb(211, 211, 255);
}


/* Section Left Styles */
section#left h1 {
   color: rgb(211, 211, 211);
   text-shadow: 0px 0px 5px black;
}

#mportrait {
   filter: drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9))
           grayscale(0.7);
   opacity: 0.6;
   transform: rotateY(180deg);
}


/* Footer Styles */
footer {
   border-top: 2px solid rgb(171, 171, 171);
}