.buttons {
    background-color: #04AA6D; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 12px;
  }

  .button-red {
    background-color: white; 
    color: black; 
    border: 2px solid red;
  }
  .button-red:hover {
    background-color: red;
    color: white;
  }

  .button-green {
    background-color: white; 
    color: black; 
    border: 2px solid green;
  }
  .button-green:hover {
    background-color: green;
    color: white;
  }

  .button-darkblue {
    background-color: white; 
    color: black; 
    border: 2px solid darkblue;
  }
  .button-darkblue:hover {
    background-color: darkblue;
    color: white;
  }

  .button-purple {
    background-color: white; 
    color: black; 
    border: 2px solid purple;
  }
  .button-purple:hover {
    background-color: purple;
    color: white;
  }

  .button-blue {
    background-color: white; 
    color: black; 
    border: 2px solid blue;
  }
  .button-blue:hover {
    background-color: blue;
    color: white;
  }

  .button-orange {
    background-color: white; 
    color: black; 
    border: 2px solid orange;
  }
  .button-orange:hover {
    background-color: orange;
    color: white;
  }

  .button-darkred {
    background-color: white; 
    color: black; 
    border: 2px solid darkred;
  }
  .button-darkred:hover {
    background-color: darkred;
    color: white;
  }

  .button-yellow {
    background-color: white; 
    color: black; 
    border: 2px solid yellow;
  }
  .button-yellow:hover {
    background-color: yellow;
    color: white;
  }

  .button-darkslategray {
    background-color: white; 
    color: black; 
    border: 2px solid darkslategray;
  }
  .button-darkslategray:hover {
    background-color: darkslategray;
    color: white;
  }