*, *::after, *::before {box-sizing: inherit;}
body {
  --color: hsl(269, 19%, 30%);
  --bgColor: hsla(32,100%,85%,.35);
  --linkColor: hsla(214, 71%, 47%, 1);
  --linkColorUnderline: hsla(214, 71%, 47%, .5);
  --linkColorHover: hsla(214, 100%, 35%, 1);
  --linkBgHover: hsla(214, 100%, 85%, 1);
  --linkFocus: hsla(214, 71%, 80%, 0.3);
  --focusOutline: hsla(214, 71%, 85%, 1);

  --textShadow: #fff;
  --boxShadow: hsla(0,0%,0%,.3);
  --bgColorForm: hsla(120,50%,50%,.075);

  font-family: sans-serif;
  text-rendering: optimizeLegibility;
  margin: 1rem;
  line-height: 1.5;
  padding-bottom: 2rem;
  background-attachment: fixed;

  min-height: 100%;
  color: var(--color);
}
main {
  max-width: 36rem;
  margin: 0 auto;
}
h1 {
  font-weight: 100;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
h1 + p {
  font-size: 1.35rem;
  font-weight: 100;
  text-align: center;
}
h2 {
  font-weight: 400;
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}
p {
  text-align: center;
  font-size: 1.125rem;
}
ul, p {
  max-width: 40rem;
  margin: 1em auto;
}
li {
  margin:.25rem 0;
}
figure {
  margin: 2rem auto;
  max-width: 40rem;
}
figure + figure {
  margin-top: 3rem;
  }
figcaption {
  font-size: 1.25rem;
  font-weight: 100;
}
a:link,
a:visited {
  color: var(--linkColor);
  text-decoration-color: var(--linkColorUnderline);
  outline: hsla(214, 71%, 80%, 0); solid .25rem;
  transition:
    color .3s ease-out,
    background-color .3s ease-out,
    outline-color .3s ease-out;
}
a:hover,
a:focus {
  color: var(--linkColorHover);
  outline: var(--linkBgHover) solid .25rem;
  background-color: var(--linkBgHover);
}

/* Specifics */

.-visually-hidden {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.frm {
  background-color: var(--bgColorForm);
  border: 2px dashed #f90;
  padding: .6rem 1rem 1rem;
  max-width: 40rem;
  margin: 0 auto;
}
.frm_lbl {
  display: block;
  margin: 0 0 .25rem;
}
.frm_txtr {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.75rem 0.5rem 0 2.5rem;
  border: 1px solid #ddd;

  font-size: inherit;
  font-family: monospace, monospace;
  text-shadow: 0 1px var(--textShadow);
  letter-spacing: 0.01em;
  text-align: left;
  white-space: pre;
  text-overflow: ellipsis;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  tab-size: 2;
  hyphens: none;
  overflow: auto;

  min-height: 15rem;
  resize: both;
  min-width: calc(100% - 3rem);

  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' viewBox='0 0 1920 64'%3E%3Cpath fill='%23fcfcfa' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2.6' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3Cpath fill-opacity='.2' d='M20 36c6 0 11 5 11 11s-5 11-11 11S9 53 9 47s5-11 11-11zm8 6a10 10 0 00-16 0c-2 2-2 4-2 6 0 6 4 10 10 10s10-4 10-10c0-2 0-4-2-6z'/%3E%3C/svg%3E");
  background-attachment: local;
  background-size: 120rem 4rem;
  background-position: top -1.2rem left 0;
}
.frm_txtr:focus {
  outline-offset: calc(-0.25rem - 1px);
  outline: var(--focusOutline) solid 0.25rem;
  z-index: 5;
}
.frm_txtr:hover, .frm_txtr:focusn {
  box-shadow: 0 .25rem .25rem var(--boxShadow);
}


/* Buttons */
button::-moz-focus-inner {
  border: 0;
}
.frm_buttons {
  display: flex;
  justify-content: space-around;
}
.btn-convert,
.btn-reset {
  font-size: inherit;
  margin: 1rem 0 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: .618rem 1.618rem;
  letter-spacing: 1px;
  text-shadow: rgba(0,0,0,.9) 0 1px 2px;
  color: #fff;
  background-color: #434343;
  border: 1px solid #242424;
  border-radius: 4px;
  box-shadow:
    rgba(255,255,255,.25) 0 1px 0,
    inset rgba(255,255,255,.25) 0 1px 0,
    inset rgba(0,0,0,.5) 0 0 0,
    inset rgba(255,255,255,.08) 0 1.25rem 0,
    inset rgba(0,0,0,.3) 0 -1.25rem 1.25rem,
    inset rgba(255,255,255,.1) 0 1.25rem 1.25rem;
  transition: all .2s linear;
}
.btn-convert {
  background-color: #c75000;
}
.btn-copied {
  background-color: #477343;
  border: 1px solid #242424;
}
.btn-reset {}
[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

.article p{
  text-align: left;

}

.article {
  padding: 3% 5% 0; }
}