/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: linear-gradient(to bottom, #336699 0%, #666699 69%);

}

body .container {
  max-width: 1700px;
  padding-top: 50px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap to the next line on smaller screens */
  gap: 20px; /* Adjust the gap between cards */
}

#filterable-cards .card {
  width: 20rem;
  border: 2px solid transparent;
  background: none; /* Remove the white background */
}

#filterable-cards .card.hide {
  display: none;
}

nav {
  position: absolute; /* Position the logo relative to the body */
  top: 20px; /* Adjust the top position as needed */
  left: 20px; /* Adjust the left position as needed */
  z-index: 2; /* Ensure the logo is above the overlay */
  padding-bottom: 100px;
}

.logo {
  text-decoration: none;
  color: white;
  font-size: 30px;
  margin: 40px;
  padding-bottom: 100px;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}