:root {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

@keyframes heart {
    0%,
    40%,
    80%,
    100% {
      transform: scale(1);
    }
    20%,
    60% {
      transform: scale(1.15);
    }
  }
  @keyframes bounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }
  
  .hover-icon:hover {
    transform: scale(1.25);
  }
  .hover-icon-bounce:hover {
    animation: bounce 1s infinite;
  }
  .bounce {
    animation: bounce 1s infinite;
  }
  .heart {
    animation: heart 1s infinite;
  }
  
  /* Distinct colors */
  .danger {
    color: #dc3545;
  }
  
  .danger-hover:hover {
    color: #dc3545;
  }
  
  .dark {
    color: #343a40;
  }
  
  .dark-hover:hover {
    color: #343a40;
  }
  
  .info {
    color: #17a2b8;
  }
  
  .info-hover:hover {
    color: #17a2b8;
  }
  
  .light {
    color: #f8f9fa;
  }
  
  .light-hover:hover {
    color: #f8f9fa;
  }
  
  .primary {
    color: #007bff;
  }
  
  .primary-hover:hover {
    color: #007bff;
  }
  
  .secondary {
    color: #6c757d;
  }
  
  .secondary-hover:hover {
    color: #6c757d;
  }
  
  .success {
    color: #28a745;
  }
  
  .success-hover:hover {
    color: #28a745;
  }
  
  .warning {
    color: #ffc107;
  }
  
  .warning-hover:hover {
    color: #ffc107;
  }
  
  /* Extra css classes to change layouts */
  .base-border-radius {
    border-radius: var(--base-border-radius);
  }
  
  .md-typeset .slim-button {
    padding: .3em 1.3em;
  }