.questionnaire-welcome {
    background-color: var(--green);
    color: var(--fg_color);
    padding: .5rem;
    border-radius: 4px;
    margin: 0 0 1rem 0;
    line-height: 1.5;
    font-size: 1em;
}

.questionnaire-welcome p {
    margin: .3rem 0;
}

@media screen and (min-width: 768px) {
    .questionnaire-welcome {
        font-size: 0.65em;
    }
}

.questionnaire-page {
    width: 95%;
    max-width: 540px;
    margin: 0 0 1rem 0;
    padding: .5rem;
}

.questionnaire-notice {
    margin-top: .5rem;
}

.questionnaire-form {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: .5rem;
}

.questionnaire-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.questionnaire-field label {
    font-family: "Monogram", monospace;
    color: var(--fg_color);
}

.questionnaire-field input[type="text"],
.questionnaire-field input[type="email"],
.questionnaire-field input[type="number"],
.questionnaire-field textarea,
.questionnaire-field select {
    font-family: "Monogram", monospace;
    font-size: inherit;
    color: var(--fg_color);
    background-color: var(--bg_color);
    border: 1px solid var(--fg_color);
    padding: .2rem .4rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.questionnaire-field input:focus,
.questionnaire-field textarea:focus,
.questionnaire-field select:focus {
    border-width: 2px;
}

.questionnaire-submit button {
    font-family: "Monogram", monospace;
    font-size: inherit;
    color: var(--bg_color);
    background-color: var(--fg_color);
    border: 1px solid var(--fg_color);
    padding: .2rem 1rem;
    cursor: pointer;
}

.questionnaire-submit button:hover {
    opacity: .85;
}

.questionnaire-privacy {
    font-size: 0.8em;
    color: var(--muted);
    margin-bottom: .4rem;
}

.questionnaire-privacy label {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    cursor: pointer;
}

.questionnaire-privacy a {
    color: var(--muted);
}

@media screen and (min-width: 768px) {
    .questionnaire-page {
        width: 70%;
    }
}