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

   History Style Sheet
   Author: Campbell Gilliland 
   Date:   03/10/2025

   Filename:         history.css
   Supporting Files: 

*/
/* set header nav and section elems to block display */
header, nav, section{
    display: block;
}

/* set default padding and margin for all elem to 0 */
*{
    margin: 0;
    padding: 0;
}
/* set header bg color and width and align the text center */
header{
    background-color: rgb(51, 51, 51);
    text-align: center;
    width: 55em;
}
/* set height of the inline header img */
header img{
    height: 4em;
}
/* set nav elem to float left with a width of 15em and a dark gray color */
nav{
    float: left;
    width: 15em;
    background-color: rgb(51, 51, 51);
}
/*
Set nav line item font, size, line height,
 remove list style, set margin left and bottom 
 */
nav li{
    font-family: "Century Gothic", sans-serif;
    font-size: 0.7em;
    line-height: 1.4em;
    list-style-type: none;
    margin-left: 1em;
    margin-bottom: 1.2em;
}
/* set links within the navbar color and remove underline */
nav a{
    color: rgb(212, 212, 212);
    text-decoration: none;
}
/* change color of nav links to white when hovering */
nav a:hover{
    color: rgb(255, 255, 255);
}
/* 
set speech section's bg color, width, float it left, and change
font
*/
#speech{
    background-color: rgb(212, 212, 212);
    width: 40em;
    float: left;
    font-family: "Palatino Linotype", serif;
}
/* 
set speech sections h1 bg color, text color,
 font size, and center align
*/
section h1{
    background-color: rgb(51, 51, 51);
    color: rgb(212, 212, 212);
    font-size: 2em;
    text-align: center;
}
/* 
set speech section's paragraphs' font size and margin
*/
section p{
    margin: 1em;
    font-size: 0.9em;
}
/* 
set speech section's first letter of the first line of the first paragraph
to be larger, float left, increase margin and padding,
and add border to the bottom and right of the letter
*/
section p:first-of-type::first-letter{
    font-size: 4em;
    line-height: 0.8em;
    float: left;
    margin-right: 0.3em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    border-right: 0.02em solid black;
    border-bottom: 0.02em solid black;
}
/* Transform the first line of the first paragraph in the speech section to
uppercase  */
section p:first-of-type:first-line{
    text-transform: uppercase;
}
/*float inline images in the speech section to the right once right margin is clear */
section img{
    float: right;
    clear: right;
    height: 4em;
}