/*
   New Perspectives on HTML and CSS
   Tutorial 8
   Case Problem 1
   Special Effects style sheet
   Author: Mauricio Rivas Briceno
   Date:  11/05/2025 

   Filename:         dweffects.css
   Supporting Files: 

*/

body {
  /* Two drop shadows: one on the right edge, one on the left edge */
  box-shadow: 
    10px 0px 15px rgba(211, 211, 211, 0.5),
    -10px 0px 15px rgba(211, 211, 211, 0.5);
}

/* Step 3: Style the horizontal navigation list items */
nav.horizontal li {
  background-color: rgb(224, 238, 238);   /* soft teal-gray tone */
  border-radius: 10px;                    /* rounded corners */
  box-shadow:
    inset 3px 3px 2px rgba(255, 255, 255, 1),       /* white upper-left inset */
    inset 5px 5px 5px rgba(147, 207, 207, 1);       /* soft teal lower-right inset */
}

/* Step 4: Shadows for the article element */
article {
  box-shadow:
  inset 15px 15px 75px rgb(171, 171, 171),
  5px 5px 5px rgb(101, 101, 101);
}

/* Step 5 - horizontal gradient on blockquote */
blockquote{
	/* Fallback solid color */
	background-color: rgb(255, 255, 255);
	
	/* Modern syntax */
	background-image: linear-gradient(
	  to right,
	  rgb(166, 230, 230) 0%,
	  rgb(231, 231, 231) 5%,
	  rgb(255, 255, 255) 15%
	);
	
	/* Old Firefox/Opera prefixes (for completeness) */
	background-image: -moz-linear-gradient(
	  left,
	  rgb(166, 230, 230) 0%,
	  rgb(231, 231, 231) 5%,
	  rgb(255, 255, 255) 15%
	  );
	background-image: -o-linear-gradient(
	  left,
	 rgb(166, 230, 230) 0%,
	 rgb(231, 231, 231) 5%,
	 rgb(255, 255, 255) 15%
	);
	
	/* Old Webkit gradient() syntax */
	background-image: -webkit-gradient(
	  linear,
	  left top, right top,
	  color-stop(0,    rgb(166, 230, 230)),
	  color-stop(0.05, rgb(231, 231, 231)),
	  color-stop(0.15, rgb(255, 255, 255))
	 );
	 
	 /* IE 6-9 legacy filter */
	 /* Starts at #DEF4F4 and ends at #FFFFFF */
	 filter: progid:DXimageTransform.Microsoft.gradient(
	   startColorStr=#DEF4F4,
	   endColorStr=#FFFFFF,
	   GradientType=1
	 );
}