@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: Yulia Bekirova
   Date: 03.15.2026
   Filename: tb_visual1.css
*/


/* HTML Styles */

html {
   background-image: url(tb_back1.png);
}


/* Body Styles */

body {
   border-left: 3px solid rgb(169,130,88);
   border-right: 3px solid rgb(169,130,88);

   box-shadow: 
      25px 0px 35px rgb(53,21,0),
     -25px 0px 35px rgb(53,21,0);
}


/* Main Styles */

main {
   background-image: url(tb_back4.png);
   background-size: 100%;
   background-repeat: no-repeat;
   background-origin: padding-box;

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


/* Heading Shadow */

main header h1 {
   text-shadow:
      1px 1px 0 rgb(221,221,221),
      5px 5px 20px rgba(41,41,41,0.9);
}


/* Figure Box */

figure {
   margin: 10px auto;
   width: 70%;
}

figure img {
   border-width: 25px;
   border-style: solid;
   border-image: url(tb_frame.png) 60 stretch;

   display: block;
   width: 100%;

   filter: sepia(80%);
   -webkit-filter: sepia(80%);
}

figcaption {
   font-family: "Palatino Linotype", Palatino, "Times New Roman", serif;
   font-style: italic;
   padding: 10px 0px;
   text-align: center;
}


/* Article Styles */

article {
   background-image: url(tb_back6.png);
   background-position: bottom right;
   background-repeat: no-repeat;
   background-size: 15%;

   border-right: 8px double rgb(147,116,68);
   border-bottom: 8px double rgb(147,116,68);

   border-bottom-right-radius: 50px;
}


/* Aside Styles */

aside {
   border: 4px double rgb(147,116,68);
   border-radius: 30px;

   background-image: url(tb_back2.png);
   background-repeat: no-repeat;
   background-position: right top;
}


/* File Styles */

main > header {
   background-image: url(tb_back3.png);
   background-position: left bottom;
   background-repeat: no-repeat;
}