.header-buttons {
    background-color: var(--dark-gray);
    font-family: var(--font);
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--font-color);
    border-radius: var(--radius);
    height: var(--button-height);
    width: auto;
}

button, button:link {
    margin: 0;
    padding: 0;
    border-radius: var(--radius);
    color: var(--font-color);
    background-color: var(--gray);
    font-family: var(--font);
    font-size: var(--font-size-med);
    height: auto;
    border: none;
    padding: var(--spacing-sm) var(--spacing-sm);
}
button:hover {
    background-color: var(--black); 
    color: var(--red); 
    border-radius: var(--radius);
    
}

button:disabled {
    background-color: var(--gray-disabled);
    color: var(--font-color-disabled);
    cursor: not-allowed;
}


.underline-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    color: var(--font-color);
    text-decoration: underline;
    padding: var(--spacing-sm);
    font-size: var(--font-size-med);
    font-family: var(--font);
}

.underline-button-lg {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    color: var(--font-color);
    text-decoration: underline;
    padding: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-family: var(--font);
    font-weight: var(--font-weight-lg);
}

.underline-button:hover, .underline-button-lg:hover, a:hover {
    color: var(--red);
}

.link-button {
    display: inline-block;
    margin: 0;
    border-radius: var(--radius);
    color: var(--font-color);
    background-color: var(--gray);
    font-family: var(--font);
    font-size: var(--font-size-med);
    border: none;
    padding: var(--spacing-sm);
    text-align: center;
}

.link-button:hover {
    background-color: var(--black);
    color: var(--red);
}