/* Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
  margin: 0;

  font-family: Roboto, sans-serif;
}

/* Header section */
ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  gap: 30px;
  margin-right: 230px;

  font-size: 18px;
  color: #e5e7eb;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #1f2937;
}

h1 {
  margin-left: 230px;
  margin-right: auto;

  font-size: 24px;
  color: #f9faf8;
}

/* Hero text section */
.hero {
  display: flex;
  padding: 100px 0;

  background-color: #1f2937;
}

.hero-text {
  margin-left: 230px;
  margin-right: 100px;
}

.hero-text h2 {
  margin: 0px;
  font-size: 48px;
  color: #f9faf8;
  font-weight: 900;
}

.hero-text p {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 18px;
  color: #e5e7eb;
}

.hero-text button {
  cursor: pointer;
  padding: 8px 30px;
  border: 1px solid #3882f6;
  border-radius: 8px;

  font-size: 18px;
  color: #e5e7eb;
  font-weight: bold;
  background-color: #3882f6;
}

.hero-image {
  margin-right: 230px;
}


/* Some random information section */
.info {
  text-align: center;
  
  padding: 50px;
}

.info h2 {
  margin: 0;
  padding-bottom: 50px;

  font-size: 36px;
  color: #1f2937;
  font-weight: 900;
}

.container {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;

}

figure {
  max-width: 190px;
}

/* Quote section */
.quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #e5e7eb;
}

.quote p {
  width: 1000px;
}

.quote p {
  margin: 0px;
}

.quote-text {
  font-size: 36px;
  color: #1f2937;
  font-weight: 300;
  font-style: italic;
  padding: 150px 200px 0 200px;
}

.quote-author {
  text-align: end;
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 150px;
}

/* Sign up button section */
.sign-up {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sign-up-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1000px;
  height: 120px;
  margin: 100px;

  background-color: #3882f6;
  border-radius: 8px;
}

.sign-up-hero {
  font-size: 24px;
  color: #f9faf8;
  font-weight: bold;
  margin-bottom: 0px;
}

.sign-up-secondary {
  font-size: 18px;
  color: #e5e7eb;
  margin-top: 3px;
}

.sign-up-right button {
  cursor: pointer;
  padding: 8px 30px;
  border: 2px solid #f9faf8;
  border-radius: 8px;

  font-size: 18px;
  color: #e5e7eb;
  font-weight: bold;
  background-color: #3882f6;
}

/* Footer Section */
footer {
  background-color: #1f2937;
  text-align: center;
  padding: 45px 100px;
}

footer p {
  margin: 0;
  font-size: 18px;
  color: #e5e7eb;
}