@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Tutorial Case
   
   Visual Style Sheet for Tree and Book Family Home Page
   Author: Mohammad Z Taieeb
   Date: 03/04/2026
   
   Filename: tb_visual1.css
*/


/* Figure Box Styles */

figure {
   margin: 20px auto 0px;
   border-style: solid;
   border-width: 25px;
   border-image: url("tb_border.png") 50 repeat;
}

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

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: url(tb_back1.png);
}


/* Article Styles */

article {
   background:
      url(tb_back2.png) bottom right / 15% no-repeat content-box,
      url(tb_back3.png) bottom left / 15% no-repeat content-box,
      url(tb_back4.png) 100% / cover no-repeat,
      rgb(211,211,211);

   box-shadow:
      inset rgb(71,71,71) -10px -10px 25px,
      inset rgb(71,71,71) 10px 10px 25px;
}

article header h1 {
   text-shadow:
      rgb(181,211,181) 2px 2px 1px,
      rgba(21,21,21,0.66) 5px 5px 25px;
}


/* Page Body Styles */

body {
   border-left: 1px solid rgb(51,51,51);
   border-right: 1px solid rgb(51,51,51);

   box-shadow:
      rgb(51,51,51) 15px 0px 25px,
      rgb(51,51,51) -15px 0px 25px;
}


/* Aside Styles */

aside {
   border: 4px double rgb(45,93,62);
   border-radius: 30px;

   background: radial-gradient(
      white,
      rgb(151,222,151),
      rgb(81,125,81)
   );

   box-shadow: rgba(51,91,51,0.4) 0px 0px 20px 10px;
}


/* Footer Styles */

footer {
   background: linear-gradient(
      345deg,
      rgb(172,232,172),
      rgb(21,35,21) 80%
   );
}