/* Nav */

.nav-link {
  cursor: pointer;
  transition: all 0.1s ease;
  border: solid transparent 2.5px;
  color: var(--bs-dark);
}

.nav-item:hover .nav-link:not(.active) {
  background: var(--bs-dark);
  color: var(--bs-light);
  box-shadow: 3px 3px 0 0 var(--bs-dark);
  border: solid var(--bs-dark) 2.5px;
}

.nav-link.active {
  background: var(--bs-dark);
  color: var(--bs-light) !important;
  box-shadow: 3px 3px 0 0 var(--bs-dark);
  border: solid var(--bs-dark) 2.5px;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Buttons */

.btn {
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 3px 3px 0 0 var(--bs-dark);
  border: solid var(--bs-dark) 2.5px;
  border-radius: 0;
  background: var(--bs-light);
  color: var(--bs-dark);
}

.btn:hover {
  transform: translate(-2px, -2px);
  background: var(--bs-dark);
  color: var(--bs-light);
}

.btn:active {
  transform: translate(3px);
  background: var(--bs-dark);
  color: var(--bs-light);
}

/* Cards */

.card {
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 3px 3px 0 0 var(--bs-dark);
  border: solid var(--bs-dark) 2.5px;
  border-radius: 0;
  background: var(--bs-light);
  color: var(--bs-dark);
}

.card:hover {
  transform: translate(-2px,-2px);
}

.card:active {
  transform: translate(3px);
}

/* Pagination Behavior */

.pagination .active .page-link {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: var(--bs-light);
  box-shadow: 3px 3px 0 0 var(--bs-black);
}

.pagination .page-link:hover {
  transform: translate(-2px,-2px);
  color: var(--bs-white);
  background-color: var(--bs-black);
  border-color: var(--bs-black);
}

.pagination .page-link {
  border-radius: 0rem !important;
  border-color: var(--bs-black);
  border: 2px solid;
  background-color: var(--bs-light);
  color: var(--bs-black);
  box-shadow: 3px 3px 0 0 var(--bs-black);
  cursor: pointer;
  transition: all 0.1s ease;
}

/* Selection */

::selection {
  color: var(--bs-light);
  background: var(--bs-primary);
}