.title {
  color: var(--purple-2);
  font-size: 48px;
  position: relative;
  bottom: -160px;
}

.headings {
  color: var(--blue-2);
  font-size: 24px;
}

.headings li {
  font-size: 16px;
  color: black;
}

.text {
  font-size: 16px;
  color: black;
}

.title {
  margin: 2rem auto;
  max-width: calc(806rem / 16);
}

.divs {
  margin-top: 4rem;
}

.divs > * {
  margin: 2rem auto;
  max-width: calc(806rem / 16);
}

/*box-sizing: border box*/
/* should not need this after component*/
/* .bubble:nth-child(odd) {
  background-color: #e1eefa;
} */

.content {
  margin: auto;
}

.flexBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.codey {
  transform: rotate(1.91deg);
  /* position: relative;
  left: calc(400rem / 16);
  margin-bottom: -280px; */
  z-index: -1;
}

.mailingList {
  margin: 4rem auto;
  max-width: calc(806rem / 16);
  /* padding: 0 calc(60rem / 16); */
}

.mailingList form > * {
  margin: 0.5rem auto;
}

.mailingList form input {
  border-radius: 16px;
  padding: calc(8rem / 16) 0;
}

.mailingList form input[type="text"] {
  /*temporary hard coding of font*/
  font-family: Poppins;
  font-style: normal;
  padding: 0 calc(8rem / 16);
}

.mailingList h2 {
  color: var(--blue-2);
}

@media only screen and (max-width: calc(768rem / 16)) {
  .bubble:nth-child(odd) {
    background-color: #e1eefa;
  }

  .title {
    color: var(--purple-2);
    font-size: 48px;
    display: flex;
    justify-content: center;
  }

  .codey {
    transform: rotate(1.91deg);
    position: relative;
    right: calc(1020rem / 16);
    margin-bottom: -280px;
    z-index: -1;
  }
}