.header{
    margin: 20px;
  }
  
  .header--icon{
    margin: 40px 0 0 20px;
    color: var(--brand-color);
    font-size: 5rem;
  }
  
  .header--icon__white{
    color: white;
    font-size: 20rem;
  }
  
  .main--titles{
    margin: 20px 0;
    font-weight: 700;
    width: 80%;
    max-width: 300px;
  }
  h1,h2{
    color: var(--white-color);
  }
  h1.titles--title{
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 40px;
  }
  h2.titles--title{
    font-size: 2.1rem;
    margin-bottom: 15px;
  }
  h3{
    margin-top: 10px;
    font-size: 1.5rem;
    
  }

  
  .main--hero{
    width: 90%;
    margin: 0 auto;
  }
  
  .main--buttons{
    width: 80%;
    min-width: 300px;
  }
  
  .main--button{
    padding: 10px;
    border: 0;
    border-radius: 15px;
    font-size: 1.8rem;
    margin: 10px 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .main--button__white{
    border: 1px solid var(--gray-color);
    background: white;
  }
  
  .main--button__blue{
    background: var(--brand-color);
    color: white;
  }
  
  .main--button__black-blue{
    color: var(--brand-color);
    background: var(--black-color);
    margin-bottom: 20px;
  }

  .fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .fa-twitter{
      color:var(--white-color);
  }
  
  .main--division{
    color: var(--white-color);
    text-align: center;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.6rem;
  }
  
  .main--division div{
    width: 45%;
    border-top: 1px solid var(--gray-color);
  }
  
  .main--text{
    color: #71767a;
    font-size: 1.5rem;
    margin: 5px 0 50px;
  }
  
  .text--link{
    color: var(--brand-color);
  }
  
  .main--background{
    width: 100%;
    height: 60vh;
    background: url("https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .footer{
    width: 100%;
    padding: 20px;
    font-size: 1.3rem;
  }
  
  .footer--list{
    display: flex;
    flex-wrap: wrap;
  }
  
  .footer--list li{
    
    color: #536471;
    margin: 5px 10px;
  }
  
  .footer--list li a{
      
    color: #536471;
  }
  
  @media screen and (min-width: 1024px) {
    .helper{
      display: flex;
      flex-direction: row-reverse;
      width: 100vw;
      height: 90vh;
    }
  
    .main{
      display: flex;
      align-items: center;
    }
  
    .main--background, .helper--content{
      width: 50%;
      height: 100%;
    }
  
    .main--button{
      display: block;
      width: 300px;
      margin: 10px 0;
    }
  
    h1.titles--title{
      font-size: 5rem;
    }
  
    .main--division{
      max-width: 300px;
      margin: 0;
    }
  
    .main--text{
      width: 300px;
    }
  
    .footer{
      height: 5vh;
    }
  
  }