@import url('./colors.css');

form > * {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
}

form > input, form > select, form > textarea {
    background-color: var(--block-color);
    color: var(--block-text-color);
    border: none;
    border-radius: 12px;
    outline: solid 4px transparent;
    padding: 16px 20px;
}

form > textarea {
    resize: vertical;
    min-height: 128px;
}

form > :focus {
    outline-color: var(--block-color-faded);
}

form > label {
    color: var(--text-secondary-color);
    font-weight: 600;
    margin: 0 0 8px;
}


form > input[type="submit"] {
    cursor: pointer;
    background-color: var(--color-primary-transparent);
    color: var(--color-primary);
    font-weight: 600;
    border-radius: 24px;
    width: fit-content;
    padding: 16px 24px;
    margin: 0 auto;
    transition-duration: 150ms;
}

form > input[type="submit"]:hover {
    background-color: var(--color-primary-faded);
}