@import url("/assets/actiontext-c7e6e6b7.css");
@import url("/assets/code_themes/github-d87838db.css");
/* Application styles */
html,
body {
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

form.button_to {
  display: contents;
}

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
  overflow-y: scroll;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

code {
  background-color: #ffecef;
  padding: 5px;
  font-size: 14px;
  /* color: #972e40; */
  border-radius: 6px;
}

div.highlight code {
  border-radius: 0px;
}

/* .rendered-markdown {
  line-height: 1.95rem;
}

.rendered-markdown code {
  background-color: #ffecef;
  padding: 5px;
  font-size: 14px;
  color: #972e40;
  border-radius: 6px;
}

.rendered-markdown pre code {
  background-color: none;
} */

.text-caret {
  width: 4px;
  height: 1.55rem;
  margin-left: 4px;
  background: #b2b0ae;
  display: inline-block; /* Inline prevents width from having effect */
  top: 5px;
  position: relative;
  animation: blinkTextCursor 0.9s step-end infinite;
}

@keyframes blinkTextCursor {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}