.buttons {
    display: flex;
    flex-direction: column;
    /* gap: 16px;
    padding: 20px 0; */
    align-items: center;
}

/* Individual button */
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 6px;

  /* width: 100%; */
  /* min-height: 50px;
  padding: 16px 24px; */
  width: 80%;
  height: 100px;
  margin: -10px 0px;

  font-size: 1.1rem;
  font-weight: 100;
  font-family: inherit;

  color: #ffffff;
  /* background-color: var(--button-color, #6B4C9A); */
  background: url("/images/flameButtonWide.svg") center / 100% 100% no-repeat;

  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;

  opacity: 0.95;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.button i {
  font-size: 1.4rem;
  /* transition: transform 0.2s cubic-bezier(.4,0,.2,1); */
}

.buttonGlow{
  width: 85%;
  height: 55%;
  position: absolute;
}

/* ---------------------------------
   DESKTOP STYLES
---------------------------------- */

@media (min-width: 768px) {
  .button {
    font-size: 1.2rem;
    /* transition: box-shadow 0.2s ease; */
  }

  .button i {
    font-size: 1.4rem;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1);
  }

  .button:hover {
    transform: translateY(-2px);
    /* filter: brightness(1.1); */
  }

  .button:hover i {
      color: rgb(var(--interaction-color, 255,255,255));
  }

  .button:active {
      transform: translateY(0);
      /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
  }

  .button:active i {
      color: rgb(var(--interaction-color, 255,255,255));
  }
}

/* ---------------------------------
   MOBILE GLOW CYCLE (Small Screens)
---------------------------------- */

@media (max-width: 767px) {

  .buttonGlow {
    transition: box-shadow 2s ease;
    box-shadow:
      0 0 16px 2px rgba(255,255,255,0),
      0 6px 20px rgba(0,0,0,0.4);
  }

  .buttonGlow.glow-cycle {
    transition: box-shadow 2s ease;
  }

  .buttonGlow.fading {
    transition: box-shadow 2s ease;
  }

  .button:active {
    transform: translateY(-2px);
    /* box-shadow: 0 6px 20px rgba(0,0,0,0.4); */
    /* filter: brightness(1.1); */
    outline: none;
  }

  .button:active i {
    color: rgb(var(--interaction-color, 255,255,255));
  }

  /* Glow animation when enabled */
  .mobile-glow-enabled .buttonGlow.glow-cycle {
    box-shadow:
      0 0 16px 2px rgba(var(--glow-color, 255,255,255), 0.4);
  }

  .mobile-glow-enabled .buttonGlow.fading {
    box-shadow:
      0 0 16px 2px rgba(var(--glow-color, 255,255,255), 0);
  }
}