html, body {
  height: 100%;
}

body {
  background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  max-width: 300px;
  width: 100%;
  margin: auto;
  padding: 25px;
  box-shadow: inset 0 4px 5px #100;
  
  background: hsla(0, 100%, 100%, 0.9);
}

h1, p, div, input, output {
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  width: 100%;
  
  margin-top: 20px;
  text-align: center;
}

div {
  padding: 20px;
  box-shadow: 0 0 5px #333;
  
  font-size: 1.1rem;
  font-weight: bolder;
  
  background: white;
  transition: background 300ms ease, box-shadow 300ms ease;
  
  &:hover {
    background: hsl(110, 80%, 90%);
    box-shadow: 0 0 2px hsl(70, 20%, 50%);
  }
  
  input {
    cursor: pointer;
  }
  
  output:after {
    content: " chars max";
  }
}

li {
  font-family: monospace;
  font-size: 1.1rem;
  
  transition: color 300ms ease-in;
  &.is-changed {
    color: red;
  }
}