src/pages/index.module.css

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  background-image:linear-gradient(to top, rgba(230, 239, 255, 1) , rgba(255, 255, 255, 1));
  display: flex;
  flex-direction: column;
}

[data-theme='dark'] .heroBanner {
  background-image:linear-gradient(to top, rgba(30, 40, 60, 1) , rgba(40, 50, 70, 1));
}

.container{
  width:100%;
  height:100%;
  display: flex;
}

.titles{
  display: block;
  margin: 0 0 0 10%;
  width: 40%;
}

/* To make sure the hero title is seen in light mode, add certain styling */
.titles h1 {
  color: #333333;
}

[data-theme='dark'] .titles h1 {
  color: #ffffff;
}

.image{
  width: 40%;
}

.tagline{
  color:rgba(59, 61, 63, 1);
  font-weight:light;
  margin-top:2rem;
  width:80%;
}

[data-theme='dark'] .tagline {
  color:rgba(220, 220, 220, 1);
}

@media screen and (max-width: 950px) {
  .tagline {
    font-size:16px;
  }
}

@media screen and (max-width: 1200px) and (min-width:950px) {
  .tagline {
    font-size:18px;
  }
}

@media screen and (max-width: 1400px) and (min-width:1201px){
  .tagline {
    font-size:22px;
  }
}

@media screen and (max-width: 1700px) and (min-width:1401px) {
  .tagline {
    font-size:24px;
  }
}

@media screen and (max-width: 2500px) and (min-width:1701px) {
  .tagline {
    font-size:28px;
  }
}

.buttons {
  width: 80%;
  display: flex;
  /*align-items: left;*/
  /*justify-content: left;*/
  margin-top:10px;
}

.buttons a{
  border-radius:90pt;
  box-shadow:0pt 5pt 6pt 1pt rgba(48, 113, 169, 0.16);
  background-color:white;
  margin-right: 2rem;
  color:rgba(0, 91, 244, 1);
  display:flex;
  border:1px solid rgba(0, 91, 244, 1);
}

[data-theme='dark'] .buttons a {
  background-color:rgba(50, 60, 80, 1);
  color:rgba(100, 160, 255, 1);
  border:1px solid rgba(100, 160, 255, 1);
  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.3);
}

.buttons a:first-child {
  background-color:rgba(40, 117, 243, 1);
  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.16);
  color:white
}

[data-theme='dark'] .buttons a:first-child {
  background-color:rgba(60, 130, 240, 1);
  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.3);
  color:white;
  border:1px solid rgba(60, 130, 240, 1);
}

@media screen and (max-width:820px){
  .container{
    flex-direction: column;
  }

  .titles{
    width: 90%;
    margin: 0 0 0 5%;
  }

  .image{
    width: 90%;
    margin-left: 5%;
    margin-top: 1rem;
  }

  .buttons{
    flex-direction: column;
    width: 90%;
  }

  .buttons a{
    width:12rem;
    margin-top: 1rem;
  }
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}