html {
  font-size:62.5%;
}

* {
  box-sizing: border-box;
}

body {
  margin:0;
}

main{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  width:100%;
  max-width:90rem;
  height:100dvh;
  margin:0 auto;
  padding:0;
}

textarea{
  width:100%;
  height:30%;
  font-size:1.8rem;
  line-height: 2.4rem;
  font-family:sans-serif;
}

#input{
  background: linear-gradient(to right, rgb(160, 200, 255), white);
}
#output{
  background: linear-gradient(to right, rgb(160, 255, 200), white);
}
#errors{
  background: linear-gradient(to right, rgb(255, 200, 160), white);
}

#buttons{
  width:100%;
  display:flex;
  flex-direction:row;
  align-self:flex-start;
}

button{
  font-size:2.0rem;
  font-style:italic;
  padding:0.5rem;
  margin:0.8rem 0.65rem;
  border-radius:0.4rem;
  color:white;
  background:linear-gradient(to right bottom, blue, black);
}
button:active{
  background:linear-gradient(to right bottom, skyblue, black);
  translate:0.2rem 0.2rem;
}