:root {
  --howler-red: #990000;
  --howler-red-hover: #670000;
}

/* Originally thought I had an issue with the Boostrap design going "over" my own CSS, which is why all the !important tags are there (as a researched potential solution). It ended up being a result of a typo (styles.css instead of style.css) in my HTML, however I kept the important tags to not accidentally break anything else (which happened when i removed some of them). This was a result of me using the bootstrap dark format for almost everything, and since the application was done with absolute references when dockerized, I did not get a chance to fully test it until later on. Thinking back, I probably could've just temporarily changed it, but it ended up turning out fine in the end. */

.btn-howler {
  background-color: var(--howler-red) !important;
  border: 2px solid var(--howler-red) !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

.btn-howler:hover {
  background-color: var(--howler-red-hover) !important;
  border: 2px solid var(--howler-red-hover) !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

.btn-outline-howler {
  background-color: transparent !important;
  border: 2px solid var(--howler-red) !important;
  color: var(--howler-red) !important;
  font-weight: bold !important;
}

.btn-outline-hover {
  background-color: var(--howler-red) !important;
  color: #FFFFFF !important;
}

.text-howler {
  color: var(--howler-red) !important;
}

.border-howler {
  border: 2px solid var(--howler-red) !important;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card, .form-control, .btn, .dropdown-menu {
  border-width: 2px;
  border-color: var(--howler-red) !important;
}

.navbar-brand, .text-dark, a {
  color: var(--howler-red) !important;
}

.rounded-4 {
  border-radius: 1rem;
}

#profile-avatar, #nav-avatar, .rounded-circle {
  border: 2px solid var(--howler-red) !important;
}

/* Put the follow button in the next row if screen too small */
@media (max-width: 576px) {
  #follow-container {
    width: 100%;
  }

  #follow-container button {
    width: 100%;
    margin-top: 10px;
  }

  .card .d-flex.justify-content-between {
    justify-content: center;
    text-align: center;
  }
}