/* Universal Style for entire website */
* {
  margin: 0;
  font-family: Roboto, sans-serif;
}

/* Header Style */
.header {
  /* allow logo and header nav on the same line */
  display: flex;
  /* relevant style for how logo and navbar should separated */
  justify-content: space-around;
  /* center content in header horizontally */
  align-items: center;
  /* background color for header */
  background-color: #1f2937;
  /* font color for the header */
  color: #f9faf8;
  /* logo section font size */
  font-size: 24px;
  /*  space around the content */
  padding: 10px;
}

.header h1 {
  font-size: 24px;
}

.header-nav ul {
  /* make the list on the same line */
  display: flex;
  /* space between each nav link */
  gap: 50px;
}

.header-nav li {
  /* remove the bullet points from the list */
  list-style: none;
}

.header-nav li a {
  /* font color for the header navbar */
  color: #e5e7eb;
  /* font size for the header navbar */
  font-size: 18px;
  /* remove the underline from the nav links */
  text-decoration: none;
}

/* Cover Style */
.cover {
  /* cover background color */
  background-color: #1f2937;
  /* cover font color */
  color: #f9faf8;
  /* make text and image display on same line */
  display: flex;
  /* center the content (vertically) */
  justify-content: center;
  /* center the content (horizontally) */
  align-items: center;
  /* space on top of content */
  padding-top: 150px;
  /* space on bottom of content */
  padding-bottom: 200px;
  /* space between the content (text and image) */
  gap: 100px;
}

.cover-content {
  /* align the content (horizontally) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* space between the content */
  gap: 10px;
  /* width of the content (fixed width for content) */
  width: 460px;
}

.cover-content h2 {
  /* font size of the title */
  font-size: 48px;
  /* make the title super bold */
  font-weight: 900;
}

.cover-content p {
  /* font-size for the paragraph */
  font-size: 18px;
  /* font color fot the paragraph */
  color: #e5e7eb;
}

.cover-content a {
  /* remove the underline of the link */
  text-decoration: none;
  /* font color for the link */
  color: #e5e7eb;
  /* background of the link */
  background-color: #3882f6;
  /* make the link a rounded corner */
  border-radius: 8px;
  /* add space around the link */
  padding: 10px 30px;
  /* font size for the link */
  font-size: 23px;
  /* make the link bold */
  font-weight: 700;
}

.cover-image {
  /* make it flex to simplify centering the content */
  display: flex;
  /* background-color of the image placeholder */
  background-color: #6e747c;
  /* width of the image placeholder */
  width: 650px;
  /* height of the image placeholder */
  height: 300px;
  /* center the text inside the image placeholder (vertically) */
  align-items: center;
  /* center the text inside the image placeholder (horizontally) */
  justify-content: center;
}

/* Information Style */

.information {
  /* space on top and bottom of the content */
  padding-top: 80px;
  padding-bottom: 100px;
}

.information h2 {
  /* font size of the title */
  font-size: 36px;
  /* font weight of the title */
  font-weight: 900;
  /* font color of the title */
  color: #1f2937;
  /* center the title */
  text-align: center;
  /* space at the bottom to make the title and content look better */
  margin-bottom: 50px;
}

.information-content {
  /* align text and boxes on one line */
  display: flex;
  /* center the content */
  justify-content: center;
  /* space in between each boxes */
  gap: 50px;
}

.information-image-placeholder {
  /* width of the boxes */
  width: 170px;
  /* height of the boxes */
  height: 170px;
  /* border of the boxes */
  border: 5px solid #3882f6;
  /* make the boxes' corners rounded */
  border-radius: 8px;
  /* space between boxes and descriptions */
  margin-bottom: 10px;
}

.information-content p {
  /* font size of the descriptions */
  font-size: 18px;
  /* make the description a fixed width same as the boxes width */
  width: 170px;
  /* center the descriptions in between each boxes */
  text-align: center;
}

/* Quote Style */

.quote {
  /* space on top and bottom of the content */
  padding-top: 100px;
  padding-bottom: 100px;
  /* background color of the section */
  background-color: #e5e7eb;
}

.quote-text p {
  /* font size of quote */
  font-size: 36px;
  /* make the quote italic */
  font-style: italic;
  /* make the quote a little thinner */
  font-weight: 300;
  /* set a fixed width for the quote */
  width: 770px;
  /* center the quote block but not the quote */
  margin: 0 auto;
}

.quote-author {
  /* set the font size of the quote author */
  font-size: 24px;
  /* make the quote author text bold */
  font-weight: bold;
  /* set the quote author width the same as the quote block */
  width: 770px;
  /* center the quote author block but not the quote author text */
  margin: 0 auto;
  /* a little space between the quote and the author name */
  margin-top: 5px;
}

.quote-author p {
  /* align the author name to the right */
  text-align: right;
  /* a little space between the block and text */
  padding-right: 30px;
}

/* Contact Style */

.contact {
  /* space around the content */
  padding: 100px 200px;
}

.contact-info {
  /* display button and message on the same line */
  display: flex;
  /* background of the content */
  background-color: #3882f6;
  /* make the corner a little rounded */
  border-radius: 8px;
  /* space between the message and the buttons */
  justify-content: space-evenly;
  /* the height of the content */
  height: 200px;
  /* center the message and buttons (horizontally) */
  align-items: center;
}

.contact-content {
  /* set the font size of the message title */
  font-size: 30px;
  /* set the color of the message and title */
  color: #f9faf8;
}

.contact-content-msg {
  /* a little space between title and message */
  margin-top: 5px;
  /* make the message a little thinner */
  font-weight: 300;
}

.contact-link a {
  /* set the font size of the link */
  font-size: 24px;
  /* remove the underline of the link */
  text-decoration: none;
  /* set the color of the link */
  color: #f9faf8;
  /* set the border of the link */
  border: 5px solid #f9faf8;
  /* space around between link and border */
  padding: 10px 40px;
  /* make the border rounded corner */
  border-radius: 10px;
}

/* Footer Style */

.footer {
  /* space around the content */
  padding-top: 50px;
  padding-bottom: 50px;
  /* background color of the footer */
  background-color: #1f2937;
}

.footer p {
  /* font color of the text */
  color: #f9faf8;
  /* font size of the text */
  font-size: 24px;
  /* center the text vertically */
  text-align: center;
}

.my-note {
  padding-bottom: 20px;
}

.footer a {
  text-decoration: none;
  color: #f9faf8;
}