.pushable {
  position: relative;
  background: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  outline-offset: 4px;
  outline-color: deeppink;
  transition: filter 250ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: hsl(32, 25%, 69%);
  border-radius: 8px;
  filter: blur(2px);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    hsl(32, 95%, 66%) 0%,
    hsl(32, 85%, 55%) 8%,
    hsl(32, 85%, 45%) 92%,
    hsl(32, 85%, 35%) 100%
  );
}


.pushable:hover {
  filter: brightness(110%);
}

.pushable:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

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

.pushable:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.pushable:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

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




.pushable {
    position: relative;
    background: transparent;
    padding: 0px;
    border: none;
    cursor: pointer;
    outline-offset: 4px;
    outline-color: deeppink;
    transition: filter 250ms;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .shadow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsl(0, 0%, 16%);
    border-radius: 8px;
    filter: blur(2px);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(
      to right,
      #6fa9ec 0%, /* Lighter blue */
      #3a6cae 8%, /* Main blue */
      #4076b3 92%, /* Slightly darker blue */
      #2f5b8c 100% /* Darkest blue */
    );
  }
  
  .front {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    
    border-radius: 8px;
    background: #5291e3; /* Main button background changed to blue */
    padding: 18px 20px; /* original: 8px 14px; */
    color: white;
    font-weight: 500;
    
    letter-spacing: 1.5px;
    font-size: 1rem;
    transform: translateY(-6px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    text-align: center;

    /* remember to remove all these later, below only testing */
    /* green */
    background-image: linear-gradient(to bottom, #13c96d, #11c068, #10b763, #0eaf5e, #0da659);border-color: #22E381;box-shadow: 0 10px #08773f;

    /* red */
    background-image: linear-gradient(to bottom, #f92b62, #f0275c, #e72256, #df1e51, #d6194b);border-color: #ff6a91;box-shadow: 0 10px #bd0737;
      
    /* grey */
    background-image: linear-gradient(to bottom, #e0e0e0, #bdbdbd, #9e9e9e, #7f7f7f, #616161);border-color: #cccccc;box-shadow: 0 10px #424242;

    /* blue */
    background-image: linear-gradient(to bottom, #64a0f3, #5d98ed, #568fe7, #4f87e1, #487fdb);border-color: #8fbef3;box-shadow: 0 10px #3b6db3;


}


.orangepushable {
    position: relative;
    background: transparent;
    padding: 0px;
    border: none;
    cursor: pointer;
    outline-offset: 4px;
    outline-color: deeppink;
    transition: filter 250ms;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .orangeshadow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsl(32, 25%, 30%);
    border-radius: 8px;
    filter: blur(2px);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  
  .orangeedge {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(
      to right,
      #ff9f40 0%, /* Lighter orange */
      #ff8c1a 8%, /* Main orange */
      #ff7400 92%, /* Slightly darker orange */
      #e66800 100% /* Darkest orange */
    );
  }
  
  .orangefront {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    
    border-radius: 8px;
    background-image: linear-gradient(to bottom, #ff9f40, #ff8c1a, #ff7400, #e66800);
    border-color: #ffb366;
    box-shadow: 0 10px #cc5c00;
    padding: 12px 20px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1rem;
    transform: translateY(-6px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    text-align: center;
  }
  
  .orangepushable:hover {
    filter: brightness(110%);
  }
  
  .orangepushable:hover .front {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }
  
  .orangepushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  
  .orangepushable:hover .shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }
  
  .orangepushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }
  
  .orangepushable:focus:not(:focus-visible) {
    outline: none;
  }

  
/* Orange variant of pushable buttons */
button.pushable.orange .front,
a.pushable.orange .front {
  background: none !important;
  background-color: #ff8c1a !important;
  background-image: linear-gradient(to bottom, #ff9f40, #ff8c1a, #ff7400, #e66800) !important;
  border-color: #ffb366 !important;
  box-shadow: 0 10px #cc5c00 !important;
  color: white !important;
  border: none !important;
}

button.pushable.orange .edge,
a.pushable.orange .edge {
  background: none !important;
  background-image: linear-gradient(
    to right,
    #ff9f40 0%,
    #ff8c1a 8%,
    #ff7400 92%,
    #e66800 100%
  ) !important;
}

button.pushable.orange .shadow,
a.pushable.orange .shadow {
  background: #cc5c00 !important;
}

/* Hover state */
button.pushable.orange:hover .front,
a.pushable.orange:hover .front {
  background: none !important;
  background-image: linear-gradient(
    to bottom,
    #ffae59 0%,
    #ff9933 25%,
    #ff8519 75%,
    #ff7519 100%
  ) !important;
}

/* Make sure specificity is high enough */
body .pushable.orange .front,
html .pushable.orange .front {
  background-image: linear-gradient(
    to bottom,
    #ff9f40 0%,
    #ff8c1a 25%,
    #ff7400 75%,
    #e66800 100%
  ) !important;
}