html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

main {
  display: grid;
  gap: 5vh;
  padding-top: 55vh;

}

.title {
  justify-items: center;
  max-width: 1000vw;

}

.title__changing {
  font-size: 2.5em;
  text-align: center;
}

.mission__text {
  text-align: center;
  font-size: 1em;
  max-width: 80vw;
  margin-left: 10vw;


}

.cta {
  font-size: 1.5em;
  text-align: center;
}

.cta a:hover {
  color: var(--color-blue-100);
}

.title__changing #changing-text {
    font-size: 7rem;
    transition: opacity 1s ease-in-out, color 1s ease-in-out;
    font-weight: bold;

}



@media (min-width: 768px) {

    main {
        display: flex;
        flex-direction: column;
        max-width: 50%;
        transform: translateX(70%);
        padding-top:20%;

      }


      .mission__text {
        text-align: center;
        font-size: 1em;
        max-width: 80vw;
        margin-left: 0vw;
      
      
      }


      #changing-text {
    font-size: 6.5rem;}
      
      


}