button, input[type="submit"] 
{
    /* shared styles(button and submit button)*/
    background-color: #A076F9; /* dark purple */
    color: white;
    text-align: center;
    font-size: 24px;
    padding: 12px 24px; /* 12px tall, 28px wide */
    border: none;
    border-radius: 12px;
    transition-duration: 0.4s;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover 
{
    /* shared styles(button and submit button)*/
    background-color: #C49BEF; /* purple */
    color: white;
}
body
{
    background-color: #D7BBF5; /* light purple */
    color: white;
    font-size: 22px;
}
hr
{
    border: 5px solid #C49BEF; /* purple */
    border-radius: 5px;
}
.buttons-grouped
{
    display: flex;
    gap: 5px; /* space between buttons */
    justify-content: flex-start; /* align to the left */
    margin-top: 20px;
}
.buttons-grouped form
{
    margin: 0; /* Removes default margin that browsers may apply to forms, which can add unwanted spacing */
    display: inline-block; /* prevents stacking */
}
table 
{
  border: 5px solid; /* adds only outside border */
  border-color: #EDE4FF; /* lightest purple */
  border-collapse: collapse; /* removes the space between table cells, causing adjacent borders to merge into a single border instead of being separate.*/
  border-spacing: 15px;
  width: 75%;
  margin-bottom: 20px; /* <-- This adds space below the table */
  margin-top: 20px; /* <-- This adds space below the table */
}
th, td 
{
  text-align: center;
  padding: 8px;
  max-width: 25%; /* limit width */
}
th 
{
  background-color: #A076F9; /* dark purple */
  color: white;
}
td 
{
  background-color: #C49BEF; /* purple */
  color: white;
  word-break: break-word; /* Breaks text at arbitrary points if necessary to prevent overflow */
  white-space: normal; /* Allows the text to wrap onto multiple lines and collapses extra whitespace */
}