.question {
    margin: 2rem 0;
}
.question label {
    display: block;
}

input, textarea {
    font-family: "Quicksand", sans-serif;
}

input[type="text"], input[type="password"], select, textarea {
    border: none;
    border-bottom: 2px solid var(--color-text);
    outline: none;

    padding: 0.5rem 0.2rem;

    font-size: 1rem;

    color: var(--color-text);
    background: transparent;

    transition: border-color 0.05s ease;
}

input[type="text"], input[type="password"] {
    cursor: text;
}

input[type="text"]:invalid, input[type="password"]:invalid {
    border-bottom-color: var(--color-danger);
}

button {
    display: inline-flex;
    line-height: 1;
    box-sizing: border-box;

    background: var(--color-bg);
    border: 2px solid var(--color-text);
    border-radius: 5px;

    color: var(--color-text);
    font-size: 1rem;

    padding: 0.6rem 1rem;

    cursor: pointer;

    transition: border-color 0.05s ease, color 0.05s ease;
}

button.primary:enabled:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

button:enabled:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

button:enabled:active {
    transform: translateY(1px);
}

.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

.primary:hover {
    color: var(--color-bg);
    opacity: 0.9;
}

.forward-icon {
    position: relative;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.4rem;
}
.forward-icon::before {
    content: "";
    position: absolute;

    left: 50%;
    top: 25%;

    width: 0.85rem;
    height: 2px;

    background: currentColor;

    transform: translateY(50%);
}
.forward-icon::after {
    content: "";
    position: absolute;

    top: 55%;
    left: 50%;

    width: 0.55rem;
    height: 0.55rem;

    border: solid currentColor;
    border-width: 0 2px 2px 0;

    transform: translate(10%, -95%) rotate(-45deg);
}