:root {
    --transition-speed: 0.35s;
    --border-color: white;
    --border-thickness: 1px;
  }
  
  .buttonAnimated {
    position: relative;
    display: inline-block;
    padding: var(--padding-button-y, 1.25rem) var(--padding-button-x, 2.5rem);
    margin-top: var(--spacing-lg, 1rem);
    font-family: var(--font-family-main, sans-serif);
    color: white;
    text-decoration: none;
    background-color: var(--color-bg-gray);
    overflow: hidden;

  }
  
  /* Text wrapper for safe stacking */
  .buttonAnimated .buttonText {
    position: relative;
    z-index: 2;
  }
    .buttonAnimated:hover {

    }

  
  /* Top and bottom borders as pseudo-elements */
  .buttonAnimated::before,
  .buttonAnimated::after {
    content: '';
    position: absolute;
    height: var(--border-thickness);
    width: 0;
    left: 50%;
    background-color: var(--border-color);
    transform: translateX(-50%);
    transition: width var(--transition-speed) var(--transition-function);
    z-index: 1;
  }
  
  .buttonAnimated::before {
    top: 0;
  }
  
  .buttonAnimated::after {
    bottom: 0;
  }
  
  /* Left and right borders as actual spans */
  .buttonAnimated .vertical {
    position: absolute;
    width: var(--border-thickness);
    height: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--border-color);
    transition: height var(--transition-speed) var(--transition-function);
    z-index: 1;
  }
  
  .buttonAnimated .left {
    left: 0;
  }
  
  .buttonAnimated .right {
    right: 0;
  }
  
  /* Hover effects: grow borders inward from corners */
  .buttonAnimated:hover::before,
  .buttonAnimated:hover::after {
    width: 100%;
  }
  
  .buttonAnimated:hover .vertical {
    height: 100%;
  }
  


  /* Global text selection override */
::selection {
  background: #ffffff;
  color: #000000;
}

::-moz-selection {
  background: #ffffff;
  color: #000000;
}