body {
  width: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-color: black;
}

h1 {
  text-align: center;
  font-family: Impact;
  font-size: 60px;
  color: aliceblue;
}

#main {
  text-align: center;
  display: flex;
  resize: vertical;
  resize: both;
  /* flex-wrap: wrap; */
  align-content: stretch;
  justify-content: center;
  align-items: center;
}

#opts {
  text-align: center;
  display: flex;
  resize: vertical;
  resize: both;
}

#main textarea {
  width: calc(50% - 56px);
  height: fit-content;
  /* min-width: 400px; */

  /* height: clamp(10rem, , 80vh); */

  /* overflow: scroll; */
  /* border-radius: 20px; */
  /* font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; */
  /* font-style: normal;
  font-weight: 100; */
}

textarea {
  margin: 10px;
  padding: 15px;

  font-size: 20px;
  border: solid;
  resize: none;
  background-color: rgb(44, 44, 58);
  color: rgb(59, 187, 176);
}

.btn {
  width: calc(100% - 20px);
  font-size: 2rem;
  margin: 10px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(3px);
}

.tg {
  color: #178582;
  background-image: linear-gradient(
    45deg,
    #178582,
    #4aa3a1,
    #7dbfbf,
    #b0dbdd,
    #e3f7f6
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}