@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Tutorial Case
   
   Visual Style Sheet for Tree and Book Family Home Page
   Author: Boe Mathewson
   Date:   
   
   Filename: tb_visual1.css

*/


/* Figure Box Styles */

figure {
   border-style: solid; /* setting up for a boarder image and must be set if you want to see the boarder*/
   border-width: 25px; /* setting up for a boarder image*/
   /* width and style must be set first to be able to do this border image*/
   border-image: url(../images/tb_border.png) 50 repeat;  /* 50 is the slice. the way we sliced the image*/
   margin: 20px auto 0px;
   width: 80%;
   opacity: 0.55; /* transperentcy ranges from 0-1 */
}

figure img {
   display: block;
   width: 100%;
}

figure figcaption {
   background-color: white;
   font-family: 'Palatino Linotype', Palatino, 'Times New Roman', serif;
   font-style: italic;
   padding: 10px 0px;
   text-align: center;

}
/* HTML Styles */
html {
   background-image: url(../images/tb_back1.png); /* added background image in CSS (tile is defualt and it scrolls) */
   /* background-attachment: fixed; */ /* This command keep the image from moving when scrolling its fixed */
}



/* Article Styles */
article {
   /* slash when adding size and add a comma to have two images co exsist with each other */
   background: url(../images/tb_back2.png) bottom right / 15% no-repeat content-box,  /* background-position / background-size background-repeat background-origin   */
   url(../images/tb_back3.png) bottom left / 15% no-repeat content-box, 
   url(../images/tb_back4.png) 100% / cover no-repeat, /* background position:100% / background-size:cover background-repeat:no-repeat */
   rgb(211, 211, 211); /* add a color at the end when you are using backgrounds */
   /* background position: 100% 50% or just one value 100% since 50 is the default  */
  
  
  /* Cover and contain <-- these can be used for sizes cover=fills all but some image might be lost */
   /* 
   background-position: bottom right; <-- Verticle then horizonal for background image 
   background-size: 15%;
   background-repeat: no-repeat; <-- only one image in the background no-repeat 
   background-origin: content-box; <-- removes from padding box and places it in the content box */

   box-shadow:inset rgb(71, 71, 71) -10px -10px 25px, /* box-shadow: inset=inside rgb() x=left y=-10 blur */ /* shadow on the inside right side of the article */
   inset rgb(71, 71, 71) 10px 10px 25px;              /* shadow on the inside left side of the article */
}

article header h1 {
   text-shadow:rgb(181,211,181) 2px 2px 1px, /* (Creates a shadow) "Select the color" > set "X direction" "Y direction" (postive= right and down) (negative= left and up) > "set the Blur"*/
   rgba(21,21,21, 0.66) 5px 5px 25px; 

}


/* Page Body Styles */

body {
   border-left: 1px solid rgb(51,51,51); /* for the border of the html (The black around the main center of html */
   border-right: 1px solid rgb(51,51,51);
   box-shadow: rgb(51,51,51) 15px 0px 25px, /* box-shadow: rgb() x=right y=0 blur */ /* shadow on the right side of the body */
   rgb(51,51,51) -15px 0px 25px; /* box-shadow: rgb() x=left y=0 blur */ /* shadow on the left side of the body */
}



/* Aside Styles */
aside {
   border: 4px double rgb(45,93,62); /* border around family links*/
   border-radius: 30px; /* border-radious changes the corners to not be sharp for a more smoother look*/ 
   box-shadow: rgb(51,91,51) 0px 0px 20px 10px; /* color Right=0 Down=0 blur=2 bigger shadow=20px (for wider and taller) creates a shadow around the aside box*/ 
/* background: radial gradient(color1,          color2,               color3*/ 
   background: radial-gradient(white, rgb(151, 222, 151), rgb(81, 125, 81)); /* makes a radial gradient inside the aside section family links*/ 

}


/* Footer Styles */
footer {
   /*          linear-gradient direction, rgb ()            rgb ()        % , if wanted  you can add another color*/
   background: linear-gradient(345deg,rgb(172,232,172), rgb(21,35,21)80%) /* This creates an fade to color effect in gradient way see demo for all diffrent ways you can work this*/
}