@import url("colors.css");

input, button, textarea {
    padding: .5vh;
    border-radius: 4px;
}
input[type=button], input[type=submit] {
    width: min-content;
}
input[type=text], input[type=email], input[type=password] {
    width: min(20rem, 90vw);
}
textarea {
    display: block;
}

form div label {
    display: block;
}
form div.inline-control {
    display: flex;
    gap: 2rem;
}
form {
    display: flex;
    flex-direction: column;
}
form section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
textarea.summary {
    width: min(25rem, 100%);
    margin: 2vh;
    margin-left: 0;
}

button:hover, input[type=submit]:hover {
    outline: thin solid var(--darkgray);
}
.edit-url form {
    flex-direction: row;
    gap: 0.5rem;
}

/* very specific and brittle selector but i don't want to inadvertently affect other forms */
form[action='/forms/login'] {
    gap: 1rem;
}