styles.css

body{
  display: flex;
  flex-direction: column;
  font-family: "Roboto", sans-serif;
  margin: 0;
}

.header-background, .under-header-background{
  background: #1F2937;
  color: white;
  display: flex;
  justify-content: center;
}

.header{
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  width: 80vw;
  padding: 12px;
}

.logo{
  font-weight: bold;
}

.header-links{
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-links a{
  color: lightgrey;
  text-decoration: none;
  font-size: 12px;
}

.under-header{
  display: flex;
  justify-content: space-between;
  width: 80vw;
  padding: 75px 0px;
}

.top-text-container{
  color: white;
  width: 300px;
  /* margin-left: 100px; */
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-text{
  font-size: 32px;
  width: 300px;
  font-weight: bold;
}

.hero-subtext{
  font-size: 12px;
  color: #b7b9bd;
}

.img-placeholder-box{
  background-color: grey;
  color: white;
  font-size: 12px;
  display: flex;
  width: 350px;
  /* margin-right: 100px; */
  justify-content: center;
  align-items: center;
}

.under-header button{
  background-color: #3882F6;
  color: white;
  width: 85px;
  height: 25px;
  font-size: 12px;
  border-radius: 4px;
  border-style: none;
  cursor: pointer;
  margin-top: 5px;
}

.second-section{
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding: 35px;
  margin-top: 15px;
}

.second-top-text{
  font-weight: bold;
  font-size: 24px;
}

.rounded-imgs{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 40px;
}

.rounded-img-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 13vw;
  gap: 5px;
}

.rounded-box{
  border: solid;
  border-radius: 10px;
  border-width: 2px;
  border-color:#3882F6;
  height: 100px;
  width: 100px;
}

.rounded-img-desc{
  font-size: 12px;
  width: 115px;
  text-align: center;
  color: grey;
}

.quote-box{
  background-color: #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 75px;
}

.quote{
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  width: 525px;
}

.author-box{
  display: flex;
  justify-content: right;
  width: 500px;
}

.quote-author{
  font-weight: bold;
}

.sign-up{
  padding: 60px;
  display: flex;
  justify-content: center;
}

.sign-up-box{
  display: flex;
  justify-content: space-evenly;
  padding: 40px;
  width: 75vw;
  background-color: #3882F6;
  border-radius: 6px;
}

.sign-up-text{
  display: flex;
  flex-direction: column;
}

.sign-up-main{
  color: white;
  font-weight: bold;
}

.sign-up-subtext{
  color: lightgrey;
  font-size: 12px;
}

.sign-up button{
  border-width: 1px;
  border-style:solid;
  border-radius: 6px;
  border-color: white;
  background-color: #3882F6;
  color: white;
  height: 25px;
  width: 80px;
}

footer{
  background: #1F2937;
  color: lightgrey;
  font-size: 12px;
  padding: 25px;
  text-align: center;
}