@import url('https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "SUSE Mono", sans-serif;
  background: #2A7B9B;
  background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
}

main {
  min-height: 100vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

h1, 
h2 {
  text-align: center;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 1.6rem;
}

input, 
button {
  padding: .8rem;
  display: block;
  margin: 0 auto .5rem;
  border-radius: .5rem;
  border: none;
  font-size: 1rem;
  outline: none;
}

input {
  width: 280px;
}

button {
  width: 150px;
  cursor: pointer;
  background-color: #2A7B9B;
  color: white;
  transition: all ease .3s;
}

button:hover {
  letter-spacing: .2rem;
}