* {
  box-sizing: border-box;
}

html,
body,
main,
textarea {
  margin: 0;
  padding: 0;
  font-size: 2.2rem;
  line-height: 3.4rem;
  font-family: sans-serif; /* 'VAGRounded-Light', */
  background: hotpink;
  color: white;
  height: 100%;
  overflow: hidden;
}

main {
  padding: 1rem;
}

main > :first-child {
  margin-top: 0;
}

p {
  margin: 1rem 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: crosshair;
  opacity: 1;
  transition: opacity 200ms ease-out;
  outline: none;
}

textarea {background: none;border: 0;width: 100%;height: 100%;padding: 20px;font-weight: bold;text-transform: uppercase;outline: none;}

textarea:focus + canvas {
  opacity: 0.4;
}

#reset:hover,
#reset:focus { 
  filter: saturate(100%);
  cursor: pointer;
}

#reset {
  position: absolute;
  top: 20px;
  right: 0;
  font-size: 2rem;
  background: none;
  border: 0;
  z-index: 10;
  padding: 20px;
  outline: 0;
  filter: saturate(90%);
}