/*The font type and other styles are defined for the entire web page.*/
*{margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: Garamond, 'Times New Roman', serif; color: rgb(60, 50, 42);}

/* This makes the scroll feature smooth.*/
html {scroll-behavior: smooth;}

/* This describes the background color of the web page.*/
body {background-color: rgb(217, 217, 217);}

/* This describes the margin spacing for the paragraph.*/
p, li {margin: 10px;}

/* This describes the list style type for the unordered list.*/
li {list-style-type: disc; margin-left: 25px;}

/* These all describe how the navigation menu is created.*/
.header {width: 100%; height: 80px; display: block; background-color: rgb(122, 74, 44);}

.innerheader {width: 1000px; height: 100%; display: flex; margin: 0 auto; align-items: center; justify-content: space-between;}

.title {height: auto;}

.title h1 {font-size: 32px; color: white;}

.title h1 a {color: white;}

.navigation {display: flex; height: 100%; align-items: center;}

.navigation li {display: flex; height: 100%; align-items: center;}

/* This describes how the navigation list items will enlarge when you hover over them.*/
.navigation li a {padding: 0 20px; color: white; transition: transform 0.3s ease;}

.navigation li a:hover {transform: scale(1.1);}

/* This describes how the active web page will have its navigation header be bold and colored gold.*/
.navigation li a.active {color: gold; font-weight: bold;}

/* This describes the size and background color of the background boxes that surround each section.*/
.start, .mistakes, .glossary {width: 70%; background-color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 15px; margin: 15px auto; display: flow-root;}

/* This describes the font color and styling for the headers for each section.*/
.start h2, .mistakes h2, .glossary h2 {margin-bottom: 20px; color: rgb(122, 74, 44); border-bottom: 2px solid rgb(122, 74, 44); padding: 20px;}

/* This describes how the glossary grid is made using CSS Grid.*/
.glossarygrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 15px 10px;}

/* This describes how the glossary list items will enlarge when you hover over them.*/
.item {background-color: rgb(230, 214, 195); border-radius: 8px; padding: 15px; transition: transform 0.3s ease;}

.item:hover {transform: scale(1.1);}

.vocab {font-weight: bold; color: rgb(122, 74, 44); margin-bottom: 5px;}

/* This describes the styling for the Return to Top link.*/
#return {text-align: center; margin-top: 10px;}

#return a {padding: 8px 20px; display: inline-block; background-color: white; border-radius: 20px;}

/*This describes the color of the link on its own and when you hover over the link.*/
a:link {color: rgb(122, 74, 44);}
a:hover {color: gold;}

/*When users are using a mobile phone, the navigation links will move under the title to remain visible and the grid will collapse to one column.*/
@media (max-width: 480px) {
  .header {height: 110px;}
  .innerheader {flex-direction: column; justify-content: center; width: 90%; height: auto; gap: 8px;}
  .title h1 {font-size: 20px;}
  .navigation li {height: auto;}
	.navigation li a {padding: 5px 0; font-size: 12px;}
  
  .glossarygrid {grid-template-columns: 1fr;}
  
  main {padding: 15px 10px;}
}