html, body {
  background-color: #d0d0d0;
}

body {
  display: grid;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.app {
  max-width: 800px;
  background: white;
}

.app form {
  border:0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: 1fr;
  font-size: 3rem;
  text-align: center;
  font-weight: 600;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  grid-gap:2rem;
  align-items: stretch;
}


.app :is(button, input, select, textarea) {
  margin:0;
  text-align: center;
  font-weight: 600;
  border:0;
}

.app :is(button, input, select, textarea):focus {
  outline-color: violet;
}

.app input {
  width: 250px;
}

.app select {
  background: none;
  border:0;
  padding: 2rem;
}

.app form > * {
  background: var(--yellow);
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  display: grid;
  align-content: center;
}