html, body, .wrap {
  background: #131313;
  color: #efefef;
  font-family: "Unifont";
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

* { box-sizing: border-box; }

textarea, select, input {
  background: #131313;
  color: #cfcfef;
  border: 1px solid #262626;
  font-family: unifont;
  resize: none;
  margin: 0;
}

textarea:focus, select:focus, input:focus {
  outline: none !important;
  border: 1px solid #cfcfcf;
}

.wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 20px auto;
  grid-gap: 24px;
  grid-template-areas:
    "left right"
    "bidi bidi"
    "explanation explanation";
  padding: 48px;
  max-width: 800px;
  margin: auto;
}

.left textarea, .right textarea {
  width: 100%;
  height: 100%;
}

.left div, .right div {
  width: 100%;
  height: auto;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: #262626;
  padding: 2px;
}

textarea.invalid {
  border-color: #ef7f7f;
}

.left, .right {
  max-height: 400px;
}

.left { grid-area: left; }
.right { grid-area: right; }
.bidi { grid-area: bidi; text-align: center; }
.explanation { grid-area: explanation; }

label { display: block; }

@media (max-width: 800px) {
  .wrap {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 400px 400px 20px auto;
    grid-gap: 0;
    grid-template-areas:
      "left"
      "right"
      "explanation";
  }
  .left, .right {
    width: 100%;
  }
}