:root
{
  --text: black;
  --background: hsl(200, 50%, 90%);

  --primary: hsl(200, 70%, 80%);
  --secondary: hsl(30, 70%, 80%);
  --accent: hsl(200, 50%, 90%);
}

form
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form section
{
  background-color: var(--primary);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 5px 5px var(--secondary);
  /* margin: .3rem; */
  transition: box-shadow 150ms ease-in;
}

.form section:focus-within
{
  box-shadow: 2px 2px var(--secondary);
}

section input:focus-within
{
  box-shadow: none;
}

section input
{
  border-radius: 5px;
}

.submit
{
  padding: 1rem;
  border: none;
  box-shadow: 5px 5px var(--secondary);
  background-color: var(--primary);
  border-radius: 5px;
  transition: box-shadow 150ms ease-in;
}

.submit:active
{
  box-shadow: 1px 1px var(--secondary);
}

.invalid
{
  font-size: .9rem;
  color: red;
  font-weight: bold;
}