/*The font family and font color are defined for the entire web page.*/
*{font-family: Garamond, 'Times New Roman', serif; color: rgb(60, 50, 42);}

/*Here I specify the line height and the background image. I used linear gradient to make the image darker using this resource: https://dev.to/nazanin_ashrafi/how-to-darken-an-image-with-css-4f5h*/
body {margin: 0 auto; line-height: 2; background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url(https://codecraftworks.dev/web/4n6nIapQqQE4ThHgCWAY/assets/pexels-zeynep-karaman-391114678-14752377.jpg); background-position: center; background-size: cover;}

/*I make the headers more centered and change their font style.*/
h1 {margin-left: 250px; text-align: center; font-size: 40px; font-weight: bold;}

h1, h2, h3 {font-variant: small-caps;}

h2 {margin-left: 155px; font-style: italic;}

/*I wanted the first letter of the text to be big, similar to how it is in many books. This is the resource I used: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::first-letter*/
.summary p:first-child::first-letter {font-size: 64px; font-weight: bold; float: left; line-height: 1; padding-right: 8px;}

/*I define the width and padding of the wrapper, and the background image. I use CSS Grid to arrange the banner above the summary and bring the links to other projects into a sidebar. I used align-items to remove the extra spacing below the sidebar with this resource: https://www.youtube.com/watch?v=KOx0NdGJ7pc*/
.page-wrapper {max-width: 800px; margin: 60px auto; padding: 40px; background-image: url(https://codecraftworks.dev/web/4n6nIapQqQE4ThHgCWAY/assets/pexels-dav-h-58867999-7952409.jpg); border-radius: 8px; display: grid; grid-template-columns: 2fr 200px; gap: 30px; grid-template-areas: "intro sidebar" "main main"; align-items: start;} 

.intro {grid-area: intro;}

.main {grid-area: main;}

.sidebar {margin-top: 100px; grid-area: sidebar;}

/*I remove the bullet points from the list.*/
.sidebar ul {list-style: none; padding: 0; margin: 0;}

/*I take each of the text sections and use Flexbox to separate each of them. I use box shadow to make it appear as if they were pages from a book.*/
.summary, .preamble, .explanation, .participation, .benefits, .requirements {display: flex; flex-direction: column; justify-content: center; padding: 60px; margin-bottom: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.15); transition: transform 0.3s ease;}

.sidebar {padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.15);}

/*I make each of the pages enlarge slightly when you hover over them.*/
.summary:hover, .preamble:hover, .explanation:hover, .participation:hover, .benefits:hover, .requirements:hover, .sidebar:hover {transform: scale(1.02);}

/*I use transform to make the pages look scattered.*/
.summary {transform: rotate(-2.5deg);}
.preamble {transform: rotate(2deg);}
.explanation {transform: rotate(-2.5deg);}
.participation {transform: rotate(2deg);}
.benefits {transform: rotate(-2.5deg);}
.requirements {transform: rotate(2deg);}

/*I center the links in the footer.*/
footer {text-align: center;}

/*I make the link color more suited to a book theme and made it bold when you hover over it.*/
a {color: rgb(122, 74, 44); text-decoration: underline;}

a:hover {font-weight: bold;}

/*When users are using a mobile phone, the grid collapses to 1 column and the margins for h1, h2, and sidebar are removed.*/
@media (max-width: 480px) {
  .page-wrapper {grid-template-columns: 1fr; grid-template-areas: "intro" "sidebar" "main"}
  
  h1, h2 {margin-left: 0;}
  
  .sidebar {margin-top: 0;}
}