:root {
  --color-primary: #4D90C8;
  --color-primary-hover: #3e7fb2;
  --color-primary-active: #356f9c;
  --color-info: #BDFF02;
  --color-white: #fff;
  --color-light: #F1F1F1;
  --color-gray: #666;
  --color-black: #000;
  --focus-shadow-primary: 77, 144, 200;
}

.alert-info {
  --bs-alert-bg: #F5FFD9;
  --bs-alert-border-color: #599200;
  --bs-alert-color: #5c7500;
}

body {
  font-size: 1.2rem;
  background: var(--color-white);
}

p {
  font-size: 1.2rem;
}

header {
  background: var(--color-white);
}

main {
  background: var(--color-light);
}

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-focus-shadow-rgb: var(--focus-shadow-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-white);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-hover);
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.nav-link {
  border-bottom: 4px solid transparent;
  padding: 3px;
  transition: none;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
  color: var(--color-black);
  border-bottom: 4px solid var(--color-light);
  padding: 3px;
}

.nav-link.active {
  border-bottom: 4px solid var(--color-primary);
  padding: 3px;
  font-weight: bold;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  border: 2px solid var(--color-primary);
  outline: none;
  box-shadow: none;
}

.logo-text h1,
.logo-text h2 {
  color: var(--color-gray);
  font-size: 20px;
  line-height: 1.2rem;
}
@media (max-width: 576px) {
  .logo-text h1,
  .logo-text h2 {
    font-size: 1rem;
  }
  .navbar-brand img {
    width: 60px;
    height: 60px;
  }
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  padding: 1rem;
  border-radius: 0.5rem;
}

.object-cover {
  object-fit: cover;
}