/* ORIGINAL CSS*/

/**FOR REVIEWS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
/*END FOR REVIEWS     */

  body {
   font: 24px Helvetica;
   background: #f5f3f1;
    width: 100vw;
	min-height: 100vh;
   padding-right: padding: 0 50px;;
   padding-left: padding: 0 50px;;
  
   display:flex; 
   flex-direction: column; 
   justify-content: center; 
   align-items: center;
  }

  #main {
   min-height: 700px;
   width: 80%;
   margin: 0px;
   margin-top: 245px;
   padding: 0px;
   
   display: flex;
   flex-direction: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 10px;
  /*border: 1px solid #cccc33;*/
   border-radius: none;
   background: #f5f3f1;
   display: flex; 
   flex-direction: column;   /* JUST ADDED  061526 */
           flex: 3 1 35%;
           order: 2;
   }
   
	 
   #main > article div.inwrap {
  position: relative;
  height: auto;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

/* TARGET THE LINK: Makes it a seamless wrapper */
#main > article > div.inwrap > a {
  display: block;
  width: 100%;
  text-decoration: none;
}
  
/* UPDATED SELECTOR: Added the 'a' to the hierarchy path */
#main > article > div.inwrap > a > img {
  width: 55%;
  height: auto;
  position: relative;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  display: block; 
  border: none;
}

/*REVIEWS BOTTOMS OF THE BOOK*/
#main > article > div.reviews h4 {font-family: 'Inter', sans-serif;font-weight:700; /* Bold */}
#main > article > div.reviews {width: 100%; min-height: 50px; font-size: 16px;padding: 20px; }
#main > article > div.reviews > ul > li { }
#main > article > div.reviews > ul {
	font-family: 'Inter', sans-serif;
	font-weight: 400; /* Regular */`
    padding: 0; /* Optional: Removes the default left indentation */
    margin: 0;}  /* Opt*/
	
   
  #main > nav.u-left {
   display:flex;
   flex-direction: column;
   justify-content: center;
   margin: 4px;
   padding: 5px;
   padding-left: 20px;
   padding-top: 25px;
   border: none;
   border-top: 1px solid #8888bb;
   border-top-left-radius: 7px;
   border-radius: 0; 
   background: #f5f3f1;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside.u-right {
   margin: 4px;
   padding: 5px;
   padding-top: 20px;
   
   border-radius: 0;
   /*border-top-right-radius: 7px;*/
   border-top: 1px solid #8888bb;
   background: #f5f3f1;
           flex: 1 6 25%;
           order: 3;
   }
   
    #main > aside.u-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center; 
	}
	
	div.linetop {background-color: #898d99;  width: 60%;height: 2px; margin-top: 20px;}
	div.linebottom {background-color: #898d99;  width: 60%;height: 2px; margin-bottom: 20px;}
	
	#main > aside.u-right ul.ul-links {
	list-style: none; 	}
	
	#main > aside.u-right ul.ul-links li {
	margin-top: 10px;
	margin-bottom: 10px;

	/* 1. Unvisited link */ & a:link {color: black; text-decoration: none; font-size: 20px;	font-variant: small-caps;}
	/* 2. Visited link */   & a:visited {color: purple;}
	/* 3. Mouse hover */    & a:hover {color: blue;}
	/* 4. Active */ 		& a:active {color: orange;}
	
	} 
	
   
   
   /* PHOTOS ASSIDE UPPER*/
   #main > aside.u-right > figure/photo-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
   align-items: center;	}
   
   figcaption {display: block; text-align: left; padding: 10px;}
   
   iframe.goose {border: 1px solid #cccc33;}
   
   
   div.spruce {
   position: relative;
   display: block;
   padding: 5px;
   width: 92%; 
   height: 400px; 
   margin: 30px;
   margin-bottom: 0;
   margin-left: auto !important;
   margin-right: auto !important;
   -webkit-flex: 1 6 92%;
   webkit-order: 4;
          order: 4;
 }

#goose {
    display: block; 
    width:100% !important; 
    min-width: 320px; /* Prevents it from crushing on mobile */
    height: 400px !important; 
    border: 1px solid #eebb55 !important; /* Forces your custom border */
    margin: 0 auto; /* Centers it nicely if it's block display */
	
}
	


div.pictures {
  position: relative;
  min-height: 50px;
  width: 93%;
  background-color: #f5f3f1;
  border: 1px solid #cccc33;
  margin-top: 5px;
  margin-bottom: 30px;
  margin-left: 50px;
  margin-right: 50px;
  -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 5;
           order: 5;
}

 
  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   background-color: #f5f3f1;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   
  
   }
  footer {background-color: white !important;
    -webkit-order: 6;
		    order: 6;}
   footer > span.h-scroll > p.copyright {font-size: 16px; width: 100%; text-align: center; color: black}
  
  @media screen and (max-width: 740px) {
	header {margin-top: 35px;}
  body { padding: 0;}
	
  }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
	  
	#main {margin-left:0; margin-right: 0; width: 100%; 
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
   
   img.header-home {width: 240px; }

   #main > article, #main > navu-left, #main > aside.u-right {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav.u-left, #main > aside.u-right, header, footer {
    min-height: 50px;
    max-height: 900px;
	border-radius: 0;
   }
   #main > aside.u-right {
   padding-top: 20px;} 
   
   footer > span.h-scroll > p.copyright {color: black }
   
  }