@font-face {
  font-family: "quicksand";
  /* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
  src: local("quicksand") url("./quicksand.ttf") format("tff");
}

$font-family-base: quicksand, roboto !default;

@import "~bootstrap/scss/bootstrap";

$colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
  #f39c12, #16a085;

@for $i from 1 through length($colors) {
  $color: nth($colors, $i);
  .color-#{$i} {
    color: $color;
  }
  .bg-color-#{$i} {
    background-color: $color;
    color: white;
    &:hover {
      background-color: darken($color, 10%);
      color: white;
    }
    &:focus {
      background-color: $color;
      color: white;
    }
    &:focus:hover {
      background-color: darken($color, 10%);
      color: white;
    }
  }
}

.quote {
  text-align: center;
}

.author {
  text-align: right;
}

.bg-color-twitter {
  $twitter-color: #1d9bf0;
  background-color: $twitter-color;
  color: white;
  &:hover {
    background-color: darken($twitter-color, 10%);
    color: white;
  }
  &:focus {
    background-color: $twitter-color;
    color: white;
  }
  &:focus:hover {
    background-color: darken($twitter-color, 10%);
    color: white;
  }
}

footer {
  margin: 10px;
  text-align: center;
}