@import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Adamina&family=Bebas+Neue&family=Diplomata+SC&display=swap");

body {
  background-color: #d3d3d3;
}

.diplomata-sc-regular {
  font-family: "Diplomata SC", serif;
  font-weight: 400;
  font-style: normal;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-style: normal;
}

.abhaya-libre-regular {
  font-family: "Abhaya Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.abhaya-libre-medium {
  font-family: "Abhaya Libre", serif;
  font-weight: 500;
  font-style: normal;
}

.abhaya-libre-semibold {
  font-family: "Abhaya Libre", serif;
  font-weight: 600;
  font-style: normal;
}

.abhaya-libre-bold {
  font-family: "Abhaya Libre", serif;
  font-weight: 700;
  font-style: normal;
}

.abhaya-libre-extrabold {
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-style: normal;
}

.adamina-regular {
  font-family: "Adamina", serif;
  font-weight: 400;
  font-style: normal;
}

* {
  font-family: "Adamina", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}

.show_more {
  height: 50px;
  overflow: hidden;
  animation: show_more 1s ease forwards;
}

.show_less {
  overflow: hidden;
  animation: show_less 1s ease forwards;
}

@keyframes show_more {
  from {
    height: 50px;
  }
  to {
    height: var(--target-height);
  }
}

@keyframes show_less {
  from {
    height: var(--target-height);
  }
  to {
    height: 50px;
  }
}

.active-filter {
  display: flex;
  width: 0%;
  animation: slid-active 1s ease-in forwards;
}

.deactive-filter {
  display: flex;
  width: 40%;
  animation: slid-deactive 1s ease-in forwards;
}

@keyframes slid-active {
  0% {
    width: 0%;
  }
  100% {
    width: 40%;
  }
}

@keyframes slid-deactive {
  0% {
    width: 40%;
  }
  100% {
    width: 0%;
  }
}

.button-primary {
  background-color: #007bff;
  color: white;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  background: rgba(202, 202, 202, 0.8);
  animation: button-spin-hover 0.2s ease-in forwards;
}

.button:active {
  animation: button-spin-active 0.2s ease-in forwards;
}

.button-primary:hover {
  background-color: #0056b3;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3);
}

@keyframes button-spin-hover {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

@keyframes button-spin-hover {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

input[type="text"]::placeholder {
  opacity: 1;
  color: #aaa;
}

input[type="text"]:focus::placeholder {
  color: #aaa;
}

input[type="text"]:focus {
  border-color: #4b9ee3; 
  outline: none;
}

.background-image{
  background-image: url('Resources/Web/background_body.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}