form {
    display: flex;
    flex-wrap: wrap
  }
  
  form > input {
      flex: 1 1 10ch;
      margin: .5rem
    }
  
  form > input[type="text"] {
        flex: 3 1 30ch;
      }
  
  input {
    border: none;
    background: hsl(0, 0%, 93%);
    border-radius: .25rem;
    padding: .75rem 1rem
  }
  input:invalid {
    border: none;
    background: hsl(0, 100%, 91%);
    border-radius: .25rem;
    padding: .75rem 1rem
  }
  select {
    border: none;
    background: hsl(0, 0%, 93%);
    border-radius: .25rem;
    padding: .75rem 1rem
  }
  
  input[type="submit"] {
      background: rgb(88,136,218);
      color: white;
      box-shadow: 0 .75rem .5rem -.5rem hsl(0, 50%, 80%);
    }
  
  .buttontop {
    display: block;
    margin: 0 auto;
    line-height: 28pt;
    padding: 0 20px;
    background: rgb(56, 62, 66);
    letter-spacing: 2px;
    transition: 0.2s all ease-in-out;
    outline: none;
    border: 1px solid black;
    box-shadow: 3px 3px 1px rgb(255, 255, 255), 3px 3px 1px 1px black;
  }
  .buttontop:hover {
    background: black;
    color: white;
    border: 1px solid black;
  }
  
  ::selection {
    background: #ffc8ff;
  }
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    border-bottom: 5px solid rgb(88,136,218);
    -webkit-text-fill-color: #2A293E;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}