
// Define Colors:
$heavy: #272932;
$dark: #3f4040;
$dark-light: #5e5e5f;
$red-orange: #f94e3f;
$red: #ff4e50;
$purple: #9055A2;
$dark-purple: #34314c;
$sky-blue: #47b8e0;
$bright-blue: #00dffc;
$dark-blue: #274555;
$gold: #ffc952;
$pink: #ff7473;
$bright-pink: #e94e77;
$mint: #67D5B5;
$tan: #fff1b9;
$white: #FFFFF2;

// Define Fonts:
$Raleway: 'Raleway', sans-serif;
$Rasa: 'Rasa', serif;

// Styling:

body {
  background: $heavy;
  color: $bright-blue;
  font-family: $Raleway;
  text-align: center;
}
.title {
  margin: 85px 0 25px 0;
  h1 {
    font-size: 45px;
  }
  a, a:visited {
    color: $bright-blue;
    text-decoration: underline;
  }
  a:hover {
    color: $red-orange;
  }
}
.buttons {
  margin-top: -15px;
}
button {
  color: $gold;
  background: $dark-blue;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  font-size: 28px;
  border-radius: 8px;
}
button:hover {
  cursor: pointer;
  background: rgba(39, 69, 85, .5);
}
.quotes {
  width: 750px;
  margin: 75px auto;
  background: rgba(39, 69, 85, .25);
  padding: 25px;
  border-radius: 25px;
  p {
  margin-top: 25px;
  font-size: 30px;
  color: $red-orange;
  }
  .quoteText {
    font-family: $Rasa;
  }
  .quoteAuthor {
    color: $gold;
    margin-top: 15px;
  }
}
.quotes:hover {
  background: rgba(39, 69, 85, .22);
}







