html {
  font-size: 14px;
}

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

:root {
  --petopia-navy: #3d5a94;
  --petopia-navy-dark: #2f4674;
  --petopia-coral: #e8836a;
  --petopia-bg: #f5f6fa;
}

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

body {
  background-color: var(--petopia-bg);
  margin-bottom: 60px;
}

/* Navbar */
.navbar-brand img {
  height: 36px;
}

.navbar .nav-link {
  color: var(--petopia-navy-dark);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--petopia-coral);
}

/* Links and buttons */
a {
  color: var(--petopia-navy);
}

a:hover {
  color: var(--petopia-coral);
}

.btn-primary {
  background-color: var(--petopia-navy);
  border-color: var(--petopia-navy);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--petopia-navy-dark);
  border-color: var(--petopia-navy-dark);
}

.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 var(--petopia-coral);
}

/* Main content card */
main.content-card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--petopia-navy-dark);
}

/* Question / article lists, in place of bare bullet lists */
.petopia-list-group .list-group-item {
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease-in-out;
}

.petopia-list-group .list-group-item:hover {
  border-left-color: var(--petopia-coral);
  background-color: var(--petopia-bg);
}

.petopia-list-group .list-group-item a {
  text-decoration: none;
  font-weight: 600;
}

footer {
  color: #8a8f98;
}

/* Home page category cards (question / article) */
.petopia-menu-label {
  color: var(--petopia-navy-dark);
  transition: color 0.15s ease-in-out;
}

a:hover .petopia-menu-label {
  color: var(--petopia-coral);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}