/* add these rules to update the font and text alignment */
main {
  font-family: 'Roboto', sans-serif;
  text-align: left;
}

/* Add this rule to adjust the size of the logo */
.logo {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* Add some space between the logo and the text */
}

/* Add these rules to move the header text below the logo */
.container.header-content {
  display: flex;
  flex-direction: column;
}

h1, p {
  text-align: center;
}

/* Add this rule to center the content in the main section */
.container {
  max-width: 800px; /* Adjust as needed */
  margin: 0 auto;
  padding: 0 20px;
}

/* Add media queries to adjust layout for smaller screens */
@media screen and (max-width: 600px) {
  /* Move the header text back above the logo */
  .container.header-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  h1, p {
    text-align: left;
    margin: 0;
  }
}