body {
    background-color: rgb(37, 36, 36);
  }
  
  .button-container {
    display: flex;
    justify-content: center;
    margin-top: 40px; 
  }
  
  .button {
    all: unset;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.4em 1.5em; 
    border: rgb(250, 133, 0) solid 0.1em; 
    border-radius: 0.2em; 
    color: rgb(250, 150, 0);
    font-size: 1.2em; 
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: border 300ms, color 300ms;
    user-select: none;
    margin-left: 5px;
    text-decoration: none;
  }
  
  .button p {
    z-index: 1;
  }
  

  .button:hover {
    color: #212121;
  }
  
  .button:active {
    border-color: rgb(128, 49, 0);
  }
  
  .button::after,
  .button::before {
    content: "";
    position: absolute;
    width: 6em; 
    aspect-ratio: 1;
    background: rgb(250, 179, 0);
    opacity: 50%;
    border-radius: 50%;
    transition: transform 500ms, background 300ms;
  }
  
  .button::before {
    left: 0;
    transform: translateX(-5em); 
  }
  
  .button::after {
    right: 0;
    transform: translateX(5em);
  }
  
  .button:hover:before {
    transform: translateX(-0.8em); 
  }
  
  .button:hover:after {
    transform: translateX(0.8em); 
  }
  
  .button:active:before,
  .button:active:after {
    background: rgb(128, 77, 0);
  }