@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Case Problem 1
   
   Star Dust Stories Design Styles
   Author: Martin Delgado
   Date: 03/08/26

   Filename: sd_effects.css

*/

/* HTML Styles */

html {
    background-image: url(sd_back1.png);
    background-position: 100%;
    background-size: cover;
    background-attachment: fixed;
}

/* Body Styles */

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 */

section#left > article h1 {
    color: rgb(211, 211, 211);
    text-shadow: black 0 0 5px;
}

#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);
}