Ben / RubHub

.btn,
button {
    padding: var(--space-s) var(--space-m);
    background: var(--primary-color);
    color: var(--white);
    border: solid 1px var(--primary-color-bright);
    border-bottom-color: var(--primary-color-dark);
    border-right-color: var(--primary-color-dark);
    border-radius: var(--space-s);
    cursor: pointer;
    text-decoration: none;
}

select,
textarea,
input {
    padding: var(--space-m);
    background: var(--background-color);
    color: var(--text-color);
    border: solid 1px var(--primary-color);
    border-radius: var(--space-s);
    margin-bottom: var(--space-m);
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.auth-card {
    border: 1px solid var(--primary-color);
    padding: 16px;
    border-radius: 8px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    background: var(--error-color);
    color: var(--white);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.actions {
    display: flex;
    gap: var(--space-s);
}

.simple-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.simple-form {
    width: 100%;
    max-width: 640px;
    gap: var(--space-m);
}

.simple-form input,
.simple-form select,
.simple-form textarea {
    width: 100%;
    max-width: 480px;
}

.simple-form textarea {
    min-height: 160px;
}

.simple-form button {
    align-self: flex-start;
}