:root {
  --primary: #ff8264;
  --secondary: #ffaa64;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #fd7e14;
  --info: #17a2b8;
  --light: #f8f9fa;
  --dark: #343a40;
  --bs-nav-link-color: var(--primary);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--secondary);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc697;
  --bs-btn-hover-border-color: var(--secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff8e31;
  --bs-btn-active-border-color: var(--secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4f4f4f;
  --bs-btn-disabled-border-color: #343434;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary);
  --bs-gradient: none;
}

.nav-pills {
  --bs-nav-pills-border-radius: 0.375rem;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--primary);
}

body {
  font: 14px / 24px "Roboto";
}

h1 {
  font: 40px "Georgia";
  color: var(--primary);
}

h2,
h3 {
  color: var(--secondary);
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: cover;
}

/* Style général de la page */

#search-bar {
  width: 80%;
  padding: 5px;
  border: 1px solid #f68265;
  border-radius: 30px;
}

.recipe-results {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));*/
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.category-filter {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #f68265;
  width: auto;
  display: inline-block;
}

.select:focus,
.select:active {
  border-color: var(--primary) !important;
}

.select:hover {
  border-color: var(--primary) !important;
}

@media (min-width: 500px) {
  .recipe-results {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
}

@media (min-width: 768px) {
  .recipe-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
}

@media (min-width: 1100px) {
  .recipe-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}