.btn {
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 0;

  background: var(--accent);
  color: #ffffff;

  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  min-height: 38px;

  box-shadow: 0 3px 8px rgba(17, 33, 51, 0.45);
  transition: all 0.35s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  text-decoration: none;
}

.btn:hover {
  letter-spacing: 2px;
  box-shadow: 0 6px 18px rgba(0, 159, 255, 0.55);
  /*filter: saturate(4) brightness(1.7) grayscale(0.35);
  -webkit-filter: saturate(4) brightness(1.7) grayscale(0.35);*/
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 6px rgba(0, 159, 255, 0.4);
  /*filter: saturate(4) brightness(1.7) grayscale(0.35);
  -webkit-filter: saturate(4) brightness(1.7) grayscale(0.35);*/
  transition: 100ms;
}