:root {
  --background: rgb(254, 254, 254);
  --light-blue: #97bac4;
  --dark-brown: #3c2615;
  --card-bg: rgb(255, 255, 255);
}

/* =========================
   Base Layout
   ========================= */

body {
  font-family: "Manrope", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.favourites-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.catalog-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reviews-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* =========================
   Typography
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: "Fraunces", serif;
}

.nav-item .nav-link {
  font-weight: 500;
}

/* =========================
   Utility Classes
   ========================= */

.dark-bg {
  background-color: var(--dark-brown);
}

.faded {
  color: rgb(177, 177, 177);
}

.checked {
  color: orange;
}

/* =========================
   Book Components
   ========================= */

.book-card {
  position: relative;
  cursor: pointer;
  background-color: var(--card-bg);
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.25);
}

.book-card form,
.book-card button {
  position: relative;
  z-index: 2;
}

.genre-badge {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 1rem;
  padding: 0.5em 0.75em;
  background-color: var(--light-blue);
  color: black;
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.genre-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.18);
}

.review-card {
  background-color: var(--background);
}

/* =========================
   Profile Components
   ========================= */

.profile-card {
  position: relative;
  cursor: pointer;
  background-color: var(--card-bg);
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1rem rgba(0, 0, 0, 0.2);
}

.profile-card form,
.profile-card button {
  position: relative;
  z-index: 2;
}