@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Case Problem 1
   
   Layout styles for Slate and Pencil Tutoring
   Author: Faith Henderson
   Date:   10-03-2025
   
   Filename: sp_layout.css

*/

/* Window and Body Styles */
html {height: 100%}
body {width: 95%; max-width: 960px;min-width: 640px; margin: auto; min-height: 100%; }

img {display: block;}


/* CSS Grid Styles */
body {display: grid; grid-template-columns: repeat(4,1fr);} 


#logo {grid-column: 1 / span 3; width: 100%;}


nav.horizontal, footer {grid-column: span 4;}
nav.vertical {grid-column: 4; align-self: start;}
aside {grid-column: span 2;}


nav.horizontal li {display: block; width: 12.5%; float: left;}


nav.vertical ul {list-style: none; margin: 0; padding: 0;}
nav.vertical li {float: none; width: auto;}


/* Section Styles */
section img {width: 50%;margin:auto;display: block;}
section p {width: 70%; margin: auto;}


/* Customer Comment Styles */
aside {width: 75%; padding-bottom: 30px;}
aside:nth-of-type(odd) {justify-self: end;}
aside img {float:left; width:20%; margin-right: 10px;}
aside p {float: left; width: 75%; margin-left: 5%;}