@import url("/shared.css?v=2");

form {
    display: flex;
    flex-direction: column;
    gap: var(--size-normal);
    padding: var(--size-large);
}

input {
    grid-area: input;

    background-color: hsl(0, 0%, 100%);
    border: var(--size-unit) solid hsl(0, 0%, 83%);
    border-bottom: var(--size-unit) solid #a3a3a3;
}

input:focus-visible {
    outline: none;
    box-shadow: 0 2px 4px hsla(0, 0%, 37%, 0.25);
    border-color: hsl(205, 81%, 58%);
}

h1 {
    font-size: 150%;
    margin-bottom: var(--size-small);
}

.field {
    display: grid;
    gap: var(--size-small) var(--size-large);
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "label description" "input input";
}

h1,
label,
.description {
    user-select: none;
}

label {
    font-weight: bold;
}

.description {
    justify-self: flex-end;
    text-transform: lowercase;
    opacity: 0.5;
}

button[type="submit"] {
    margin-top: var(--size-normal);
}