@import url('./variables.css');

*,
*::before,
*::after {
    box-sizing: border-box;
}

.filter-gender-wrapper {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 margin: 10px 20px;
}

.filter-label {
 font-size: 0.9rem;
 font-weight: 900;
 margin-left: 10px;
 color: var(--dark-blue);
}

.filter-gender-buttons {
 display: flex;
 gap: 10px;
 margin: 10px 10px;
}

.filter-gender-buttons button {
 width: 73px;
 height: 31px;
 background-color: var(--yellow);
 font-size: 0.9rem;
 font-weight: 700;
 letter-spacing: 1px;
 color: var(--dark-blue);
 border: solid 3px var(--dark-blue);
 border-radius: 5px;
}

.filter-gender-buttons button.active {
 background-color: var(--dark-blue);
 color: var(--yellow);
}

@media (min-width: 700px) {
 .filter-gender-wrapper {
  margin: 20px 50px;
  flex-direction: row;
  align-items: center;
 }
}

@media (min-width:1120px) {
  .filter-gender-wrapper {
   margin: 20px 100px;
 }
}