/*
   New Perspectives on HTML and CSS
   Tutorial 4
   Case Problem 1

   History Style Sheet
   Author: Breiona Bankhead
   Date:  9/29/25 

   Filename:         history.css
   Supporting Files: 

*/

/*  Display header, section, and nav as blocks */
header, section, nav {
  display: block;
}

/* Set padding and margin of all elements to 0 */
* {
  margin: 0;
  padding: 0;
}

/* Header styling */
header {
  background-color: rgb(51, 51, 51); /* Dark gray background */
  text-align: center;                
  width: 55em;
  margin: 0 auto;  /* Center content */
}

/* Inline image inside header */
header img {
  height: 4em;
}


/* Navigation styling */
nav {
  float: left;
  width: 15em;
  background-color: rgb(51, 51, 51); /* Same as header background */
}

nav li {
  font-family: "Century Gothic", sans-serif;
  font-size: 0.7em;
  list-style-type: none;   /* Remove bullets */
  line-height: 1.4em;
  margin-left: 1em;
  margin-bottom: 1.2em;
}

nav a {
  color: rgb(212, 212, 212); /* Light gray */
  text-decoration: none;    /* Remove underline */
}

nav a:hover {
  color: white;
}

/* Speech section styling */
section.speech {
  background-color: rgb(212, 212, 212);
  width: 40em;
  float: left;
  font-family: "Palatino Linotype";
  margin-left: 2em; /* spacing from nav */
}

section.speech h1 {
  background-color: rgb(51, 51, 51);
  color: rgb(212, 212, 212);
  font-size: 2em;
  text-align: center;
 
}

section.speech p {
  font-size: 0.9em;
  margin: 1em;
}

/* Drop cap effect for first letter of first paragraph */
section.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 */
section.speech p:first-of-type::first-line {
  text-transform: uppercase;
}

/* Lincoln image slices styling */
section.speech img {
  float: right;
  clear: right;
  height: 4em;
  display: block;
  margin-bottom: 0.2em;

}

