h1 {
  text-align: center;
  font-size: 60px;
  font-family: "Roboto", Open Sans, Droid Sans, Helvetica, sans-serif;
  margin: 0 auto;
  margin-top: 25px;
  /*padding: 50 0 0 0;*/
}

h2 {
  text-align: center;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  margin: 0 auto;
}

p {
  padding-top: 25px;
  padding-bottom: 25px;
  font-weight: 100;
  font-size: 40px;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif;
  text-align: center;
  /*display: block;*/
}

button {
  display: block;
  padding: 15px 25px;
  margin: 0 auto;
  margin-top: 50px;
  border: #000;
  border-style: solid;
  box-shadow: 0px 8px 8px rgba(37, 39, 89, 0.1);
  border-width: 0.5px;
  border-radius: 150px;
  background: transparent;
  color: #000;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 300ms ease-in-out;
}

button:hover {
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #fff;
  cursor: pointer;
  padding: 15px 25px;
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  border: #000;
  border-width: 0.5px;
  border-style: solid;
}

h4 {
  font-family: "Roboto", Open Sans, Droid Sans, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 100;
  margin: 0;
  padding: 0;
  line-height: normal;
}

a {
  color: #000;
}

a:hover {
  font-weight: 600;
  text-decoration: none;
}
/* this container makes sure the content will not be bigger than 800px */
.container {
  max-width: 800px;
  margin: auto;
}

/* HEADER H1 */
.quotes:hover {
  color: cornflowerblue;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.in:hover {
  color: yellowgreen;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.colors:hover {
  color: #ffbfe8;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

/* H2 */
.word-brightening:hover {
  color: #4ca1dc;
  background: #fdcf46;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.word-your:hover {
  color: #4ca1dc;
  background: #d1f28a;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.word-mood:hover {
  color: #bc5aed;
  background: #ff9854;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.word-made:hover {
  color: orangered;
  background: #fdcf46;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.word-easy:hover {
  color: #74428c;
  background: #f7d1ea;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

/* Three Qutes are following */

.quoteOnePartOne:hover {
  color: #fdcf46;
  transition: all 250ms ease-in-out;
}

.quoteOnePartTwo:hover {
  color: #f7d1ea;
  transition: all 250ms ease-in-out;
}

.separator {
  max-width: 120px;
}

.secondQuote {
  padding: 0 0;
}

.word-no:hover {
  color: #f7b177;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.word-rain:hover {
  color: #a2d2ff;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.letter-f:hover {
  color: #fe9a54;
  cursor: pointer;
}

.letter-l:hover {
  color: #74428c;
  cursor: pointer;
}

.letter-o:hover {
  color: #adc973;
  cursor: pointer;
}

.letter-w:hover {
  color: #f7b177;
  cursor: pointer;
}

.letter-e:hover {
  color: #fd5294;
  cursor: pointer;
}

.letter-r:hover {
  color: #f92637;
  cursor: pointer;
}
.letter-s:hover {
  color: #4ca1dc;
  cursor: pointer;
}

.thirdQuotePartOne:hover {
  color: #b3e44a;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.thirdQuotePartTwo:hover {
  color: #a0d6ff;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}
.thirdQuotePartThree:hover {
  color: #fdcf46;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.thirdQuotePartFour:hover {
  color: #ff5bc8;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.introTextForButton {
  font-family: "Roboto", Open Sans, Droid Sans, Helvetica, sans-serif;
  font-size: 20px;
  font-style: italic;
  margin: 0;
  padding: 0;
  line-height: normal;
}

/* Searching for the sign up button? It’s at the beginning */

.coded-by-phrase {
  font-family: "Roboto", Open Sans, Droid Sans, Helvetica, sans-serif;
  margin-top: 25px;
  font-size: 17px;
  margin-bottom: 0;
  padding-bottom: 0;
}