.main {
  padding: 1rem 1rem;
}

.title_section {
  max-width: 1000px;
  margin: 0 auto 2rem auto;
  padding: 0 3rem;
}

.title {
  font-size: 2em;
  text-align: center;
  font-variant: small-caps;
  font-weight: 900;
  color: transparent;
  background-image: linear-gradient(70deg, var(--main_1), var(--main_2));
  background-size: 100%;
  background-clip: text;
}

.input_section {
  max-width: 1000px;
  margin: 0 auto 2rem auto;
}

.text_field {
  width: 100%;
  resize: vertical;
  min-height: 4em;
  height: 4em;
  padding: 0.75em;
  border-radius: 5px;
  border: 3px solid var(--light_1);
  transition: border-color 0.1s linear;
  font-size: 1rem;
  font-family: inherit;
}

.text_field:hover {
  border-color: var(--main_1);
}

.info_box {
  margin-top: 1rem;
  padding: 0 1rem;
  color: var(--text_light);
  font-size: 0.8rem;
}

.table_container {
  overflow-x: scroll;
  padding-bottom: 1rem;
}

#output_table {
  margin: 0 auto;
}

#output_table tbody th:nth-child(1) {
  text-align: center;
}

#output_table td,
#output_table th {
  white-space: nowrap;
}

@media screen and (min-width: 40rem) {
  .main {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .title {
    font-size: 3em;
    text-align: left;
  }

  .info_box {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}