form {
  --padding: 14px;
  padding: var(--padding);
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: var(--padding);

  font-size: 20px;
}
form input,
form button {
  font-size: inherit;
  max-width: 500px;
}

.form-section,
.user-info {
  display: inherit;
  flex-direction: inherit;

  border-radius: 16px;
  overflow: hidden;
  background-color: #0000003f;
}

.form-section > label,
.user-info {
  --title-size: 24px;
  display: flex;
  align-items: center;
  gap: var(--padding);

  padding: var(--padding);
  border-bottom: 2px solid var(--main-red);
}
.form-section label input {
  height: var(--title-size);
  width: var(--title-size);
  display: inline-block;
}
.form-section label h1 {
  display: inline-block;
  font-size: var(--title-size);
}

form .questions {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}
form .questions ul {
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}

form .questions ul li {
  display: flex;
  flex-direction: column;
}

form .user-info {
  align-items: start;
}

form .user-info label {
  display: flex;
  flex-direction: column;
}

form .numberplate input {
  aspect-ratio: 52/11;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/European_stars.svg/300px-European_stars.svg.png),
    linear-gradient(to right, #174db1 12.5%, #fff 12.5%);
  background-size: 10% auto, auto;
  background-position: 1.25% 12.5%, 0%;
  background-repeat: no-repeat;

  border-style: outset;
  border-radius: 4px;
  width: 6.5em;
  padding-left: 1em;

  font-size: inherit;
  text-transform: uppercase;
}

form #submit {
  border-color: var(--main-red);
  padding: 10px;
  border-radius: 4px;
}