* {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

:focus {
  outline: 0;
}

body {
  font-size: 1rem;
  line-height: 1.8;
  padding: 0 15px;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 1.25rem;
}

label {
  font-size: 0.75rem;
}

main {
  margin: 30px auto 30px;
  max-width: 640px;
}

textarea {
  display: block;
  width: 100%;
  min-height: 300px;
  padding: 18px;
  margin: 4px 0 20px;
  font-size: 1rem;
  border-radius: 7px;
  resize: vertical;
  box-shadow: inset 9px 9px 18px #c9c9c9,
              inset -9px -9px 18px #ffffff;
  transition: .2s box-shadow ease-out;
}

textarea:focus {
  box-shadow: inset 9px 9px 18px #c9c9c9,
              inset -9px -9px 18px #ffffff,
              0 0 0 1px #a6c7fe;
}

button {
  display: block;
  max-width: 200px;
  width: 100%;
  padding: 9px;
  margin: 0 auto 50px;
  border-radius: 5px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow:  7px 7px 14px #c9c9c9,
              -7px -7px 14px #ffffff;
  transition: .2s box-shadow ease-out;
}

button:active {
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
}

button:focus {
  box-shadow:  7px 7px 14px #c9c9c9,
              -7px -7px 14px #ffffff,
              inset 0 0 0 1px #a6c7fe;
}

output {
  display: block;
  min-height: 300px;
  padding: 18px;
  margin: 4px 0 100px;
  border-radius: 20px;
  box-shadow:  18px 18px 36px #d9d9d9,
              -18px -18px 36px #ffffff;
  white-space: pre-wrap;
  word-break: break-all;
}


.article {
  padding: 3% 10%;
}