.btns-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1em 0;
}

.btn-pushable {
  margin: 0.3em;
  position: relative;
  border: none;
  background-color: var(--black-second-color);
  padding: 0;
  border-radius: 0.5em;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  width: auto;

  max-height: 45px;
}


.btn-front {
  filter: brightness(110%);
  word-wrap: break-word;
  /* box-shadow:
    inset 0 -1em 1em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(0, 0, 0),
    0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); */
  text-decoration: none;
  display: block;
  position: relative;
 

  color: #000000;
  background: #eee;
  will-change: transform;
  transform: translateY(-3px);
  transition:
    transform 600ms cubic-bezier(.3, .7, .4, 1);
}



.btn-pushable:hover {
  filter: brightness(108%);
}

.btn-pushable:hover .btn-front {
  transform: translateY(-5px);
  transition:
    transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.btn-pushable:active .btn-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.btn-pushable:focus:not(:focus-visible) {
  outline: none;
}