/* css reset section adapted (thanks!) from Michael Bowers, http://cssdesignpatterns.com */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,address,blockquote,th,td {
  margin: 0; padding: 0; border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,address,caption,cite,code,dfn,em,strong,var,h1,h2,h3,h4,h5,h6 {
  font-style: normal; font-weight: normal; font-size: 100%; }
ol,ul { margin: 0; padding: 0; }
ol { list-style-type: none; }
ul { list-style-type: disc; }
caption, th { text-align: left; }
/* *** */

body {
  background-color: #fffbfd;
  font-size: 16px;
  color: #321;
  padding: 2em;
  font-family: Helvetica, Arial, sans-serif;
}

fieldset { border: 2px; }

p {
  margin: 5px 1em 0;
  overflow-wrap: break-word;
  min-height: 22px;
  font-family: Courier, monospace;
}

#zalgo-producer {
  padding: 2em 0 2em 1em;
}

p#zalgo {
  border: 2px inset #666;
  line-height: 8;
  margin-left: 0;
}

.hidden {
  display: none;
}

h4 {
  font-weight: bold;
  margin: 1em 0 0;
}

.input-section {
  width: 80%;
  margin: 20px 9%;
}

textarea {
  width: 100%;
  font-family: "DejaVu Sans", DejaVuSans, "Liberation Sans", Helvetica, Arial, sans-serif;
  font-size: inherit;
  padding: 10px;
}

.input-section label { display: block; text-align: center }
.zalgo-section label { display: block; color: darkseagreen }

button#zalgo-toggle { background-color: #eafcff; }

.has-been-shown { min-height: 220px }