/*
   New Perspectives on HTML and CSS
   Tutorial 4
   Case Problem 1

   History Style Sheet
   Author: Mauricio Rivas Briceno
   Date:   09/27/2025--

   Filename:         history.css
   Supporting Files: 

*/

/* === General Reset - Set all margins and padding to 0 === */
* {
   margin: 0;
   padding: 0;
}

/* === Structural Elements as Blocks === */
header, section, nav {
   display: block;
}

/* === Header Styling === */
header {
   background-color: rgb(51, 51, 51);
   text-align: center;
   width: 55em;
}
header img {
   height: 4em;
}

/* === Navigation Styling === */
nav.vertical {
   float: left;
   width: 15em;
   background-color: rgb(51, 51, 51);
}

/* === Navigation List Items === */
nav.vertical li {
   font-family: "Century Gothic", sans-serif;
   font-size: 0.7em;
   list-style-type: none;
   line-height: 1.4em;
   margin-left: 1em;
   margin-bottom: 1.2em;
}

/* === Navigation Links
   - Text color: light gray (212, 212, 212)
   - No underline
   - Hover: color changes to white
   === */
nav.vertical a {
   color: rgb(212, 212, 212);
   text-decoration: none;
}
nav.vertical a:hover {
   color: white;
}

/* === Speech Section Styling
   - Background: light gray (212, 212, 212)
   - Width: 40em, floated left
   - Font: Palatino family
   === */
#speech {
   background-color: rgb(212, 212, 212);
   width: 40em;
   float: left;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

/* === H1 Styling in Speech Section
   - Background: dark gray (51, 51, 51)
   - Text color: light gray (212, 212, 212)
   - Font size: 2em, centered 
   === */
#speech h1 {
   background-color: rgb(51, 51, 51);
   color: rgb(212, 212, 212);
   font-size: 2em;
   text-align: center;
}

/* === Paragraph Styling in Speech Section === */
#speech p {
   font-size: 0.9em;
   margin: 1em;
}

/* === Drop Cap Effect for First Paragraph
   - First letter enlarged (4em)
   - Line height 0.8em
   - Floated left with margin/padding
   - Black border on right & bottom
   === */
#speech p:first-of-type::first-letter {
   float: left;
   font-size: 4em;
   line-height: 0.8em;
   margin-right: 0.3em;
   padding-right: 0.2em;
   padding-bottom: 0.2em;
   border-right: 0.02em solid black;
   border-bottom: 0.02em solid black;
}

/* === Uppercase First Line of First Paragraph === */
#speech p:first-of-type::first-line {
   text-transform: uppercase;
}

/* === Lincoln Image Wrapping
   - Inline images floated right
   - Height: 4em
   === */
#speech img {
   float: right;
   height: 4em;
   clear: right;
}