:root {
  /* Fonts */
  --font-family-body: 'Roboto', sans-serif;

  /* Colors */
  --color-dark-background: #1F2937;
  --color-hero-text: #F9FAF8;
  --color-secondary-text: #E5E7EB;
  --color-button: #3882F6;

  /* Font Sizes and Weights */
  --font-size-hero-text: 48px;
  --font-weight-hero-text: 900;

  --font-size-secondary-text: 18px;

  --font-size-logo-text: 24px;

  --font-size-information-header: 36px;
  --font-weight-information-header: 900;

  --font-size-quote-text: 26px;
  --font-weight-quote-text: 300;
}
*{
  margin:0;
  font-family: var(--font-family-body);

}
header{
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding:1rem 3rem;
  flex-wrap: wrap;
  background-color:var(--color-dark-background);
  color:white;
}

.logo-left{
  font-size: var(--font-size-logo-text);
  font-weight: 300;
}

.nav-links{
  display:flex;
  flex-wrap: wrap;
  gap:1rem;
  align-items: center;
}

li{
  list-style: none;
}

.hero-container{
  background-color:var(--color-dark-background);
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding:5rem;
  color:white;
}

.hero-left{
  display:flex;
  flex-direction: column;
  gap:1rem;
}


.second-card-container{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cards{
  max-width:200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:1rem;

}

.cards > p{
  text-align:center;
}

h2{
  text-align:center;
  margin-top:1rem;
}
.quote-container{
  padding:10rem;
  background-color: var(--color-secondary-text);
  font-size: var(--font-size-quote-text);
}

.quote-author{
  text-align: right;
}


.call-to-action{
  margin:5rem;
  background-color:var(--color-button);
  color:white;
  display:flex;
  justify-content: space-around;
  align-items: center;
  padding:4rem;
  border-radius:15px;
}

footer{
  background-color: var(--color-dark-background);
  color:white;
  padding:1rem;
  text-align: center;
}

.sign-up-btn{
  padding:10px;
  width: 5rem;
  border:1px solid white;
  border-radius:5px;
  color:white;
  background-color:var(--color-button);
  cursor:pointer;
}