@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
:root {  
  --softred: hsl(10, 79%, 65%);
  --cyan: hsl(186, 34%, 60%);
  --darkbrown: hsl(25, 47%, 15%);
  --mediumbrown: hsl(28, 10%, 53%);
  --cream: hsl(27, 66%, 92%);
  --verypaleorange: hsl(33, 100%, 98%);
}

.container {
  width: 100%;
  height: 100vh;
  font-family: "DM Sans", Verdana, sans-serif;
  font-size: 18px;
  background-color: var(--cream); 
  color: var(--darkbrown);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app {
  width: 20em;
  background-color: var(--verypaleorange);
  border-radius: 1em;
  display: flex;
  justify-content: center;
  flex-direction: column;
}  

header {
  width: 20em;
  background-color: var(--softred);
  padding: 0em;
  color: var(--cream);
  text-align: center;
  border-radius: 1em;
  margin-bottom: 1em;
}

h1 {
  font-size: 130%;
}

.eingabe {
  padding: 1em 1em 0 1em;
}

button {
  display: block;
  outline: none;
  border: none;
  padding: 0.5em;
  margin: 1em auto;
  border-radius: 0.5em;
  background-color: var(--softred);
  color: var(--cream);
  cursor: pointer;
}

.ausgabe {
  padding: 0 2em 1em 2em;
}

.stadt, .bundesland {
  color: var(--softred)
}