:root {
  --main-color_1: #cef7fe;
  --alt-main-color_1: #3ec3d8;
  --main-color_2: #f9cfcf;
  --main-color_3: #ffff;
  --font-color_1: black;
  --primary-color: #eb054b;
  --primary-color-hover: #c9043f;
  --button-border: rgba(0, 0, 0, 0.1);
}

.filter-button {
  height: 90%;
  background-color: var(--main-color_1);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  border: 1px solid var(--button-border);
  cursor: pointer;
}

.filter-button:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.filter-button.active {
  background: var(--primary-color);
  color: white;
}

#filter_all {
  background: var(--main-color_1);
  color: var(--font-color_1);
}

#filter_all:hover,
#filter_all.active {
  background: var(--primary-color);
  color: white;
}

.filterbutton_all .active {
  background-color: var(--alt-main-color_1);
}

#infocards {
  width: 100%;
}

.mainlist {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-top: 5px;
  background-color: var(--main-color_2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(233, 164, 173);
  border-radius: 20px;
  margin: 10px;
}

.list_infocard {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.li_upper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.list_category_tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.list_title {
  font-size: x-large;
  margin: 6px;
}

.list_desc {
  margin-left: 5%;
}

.list_img {
  width: 120px;
  height: 120px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
}

.list_img_2 {
  width: 30px;
  height: 30px;
}

.list_img_2:hover {
  width: 35px;
  height: 35px;
}

.font_1 {
  font-weight: bold;
  font-family: "Noto Sans", sans-serif;
  color: var(--font-color_1);
}

.title_font_left {
  font-size: xx-large;
  margin-left: 20%;
  margin-top: 3%;
}

.picture_frame {
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  height: 300px;
  width: 100%;
}

.filterbutton_all {
  width: 200px;
  background-color: var(--main-color_2);
  height: 80px;
}

.textbutton_all {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.filter {
  background-color: var(--main-color_2);
  max-height: calc(2 * 100px);
  overflow-y: auto;
}

.infocard_list {
  width: 100%;
  min-height: 600px;
  background-color: var(--main-color_1);
}

@media (max-width: 1440px) {
  .filterbutton_all {
    width: 150px;
    flex: 0 0 calc(25% - 6px);
  }
}

@media (max-width: 768px) {
  .list_desc {
    overflow: hidden;
    height: 100%;
  }

  .list_infocard {
    height: 150px;
  }

  .filterbutton_all {
    flex: 0 0 calc(33.333% - 6px);
  }
}

@media (max-width: 425px) {
  .filterbutton_all {
    flex: 0 0 75%;
  }
}