.button {
    display: inline-block;

    padding: 0.75em 1.5em;
    border: 2px solid transparent;
    border-radius: var(--button-border-radius);

    color: var(--text-color);

    font-weight: 500;
    text-decoration: none;
    transition:
        color 0.2s,
        background-color 0.2s,
        border-color 0.2s;
}

nav .button {
    padding: 0.375em 1.5em;

    font-weight: 300;
    font-size: 0.875em;
}

.button:hover {
    text-decoration: none;
    color: var(--text-color);
}

.button-primary {
    color: var(--primary-button-color);
    background-color: var(--primary-button-background-color);
    border: 2px solid var(--primary-button-border-color);
}

.button-primary:hover {
    color: var(--primary-button-hover-color);
    background-color: var(--primary-button-background-hover-color);
    border: 2px solid var(--primary-button-border-hover-color);
}

.button-primary-inverted {
    color: var(--primary-inverted-button-color);
    background-color: var(--primary-inverted-button-background-color);
    border: 2px solid var(--primary-inverted-button-border-color);
}

.button-primary-inverted:hover {
    color: var(--primary-inverted-button-hover-color);
    background-color: var(--primary-inverted-button-background-hover-color);
    border: 2px solid var(--primary-inverted-button-border-hover-color);
}

.button-secondary {
    background-color: lightgray;
}

.button-secondary:hover {
    color: var(--white-color);
    background-color: gray;
}

/* Button gaps and direction for the navigation */
.navigation-button-wrapper {
    display: flex;
    gap: 1em;
}

@media (max-width: 768px) {
    .navigation-button-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}