html {
  font-size: 13px;
}

@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-size: 0.88rem;
}

.navbar-brand {
  font-size: 1.18rem !important;
}

.nav-link, .dropdown-item {
  font-size: 0.88rem !important;
}

.card-title {
  font-size: 0.85rem !important;
}

.card-text, .badge, .breadcrumb, .form-label, .form-control, .btn {
  font-size: 0.82rem !important;
}

.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary:hover {
  background-color: #8e44ad !important;
  border-color: #8e44ad !important;
  color: #fff !important;
}

.btn-secondary, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:hover {
  background-color: #6c3483 !important;
  border-color: #6c3483 !important;
  color: #fff !important;
}

.btn-info, .btn-info:focus, .btn-info:active, .btn-info:hover {
  background-color: #a569bd !important;
  border-color: #a569bd !important;
  color: #fff !important;
}

.btn-danger, .btn-danger:focus, .btn-danger:active, .btn-danger:hover {
  background-color: #ba55d3 !important;
  border-color: #ba55d3 !important;
  color: #fff !important;
}

.btn-warning, .btn-warning:focus, .btn-warning:active, .btn-warning:hover {
  background-color: #d2b4de !important;
  border-color: #d2b4de !important;
  color: #8e44ad !important;
}

/* Remove border and box-shadow for active-vote buttons */
.active-vote {
    background-color: #eaf7f5 !important;
    /* border-color: #8e44ad !important; */
    /* box-shadow: 0 0 0 0.15rem #8e44ad40; */
    border: none !important;
}
#upvoteBtn.active-vote, #upvoteBtn .bi-hand-thumbs-up-fill {
    background-color: #28a745 !important;
    color: #fff !important;
    border: none !important;
}
#downvoteBtn.active-vote, #downvoteBtn .bi-hand-thumbs-down-fill {
    background-color: #dc3545 !important;
    color: #fff !important;
    border: none !important;
}
#favoriteBtn .bi-star-fill {
    color: #ffc107 !important;
    border: none !important;
}
/* Fix loop button icon always visible */
#loopBtn .bi {
    display: inline-block !important;
    color: inherit;
}

h1 {
  font-size: 1.35rem !important;
  font-weight: 700;
}
h2 {
  font-size: 1.08rem !important;
  font-weight: 600;
}
h3 {
  font-size: 0.98rem !important;
  font-weight: 600;
}
h4, h5, h6 {
  font-size: 0.92rem !important;
  font-weight: 600;
}