#container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: solid 1px rgb(232, 232, 232);
  background-color: rgb(232, 232, 232);
  text-align: center;
  height: 150%;
  width: 100%;
}

#input,
#output {
  flex: 1;
  margin: 5%;
  height: 500px;
  border: 1px solid black;
  border-radius: 8px;
}
#input {
  background-color: teal;
  border: 1px solid teal;
}
#output {
  background-color: white;
  border: 1px solid teal;
}
#input-text {
  width: 90%;
  height: 250px;
  color: green;
  font-size: medium;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  margin-top: 1%;
}
#output_value {
  color: green;
  font-size: medium;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
#h1 {
  color: teal;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-align: center;
}
button {
  background-color: firebrick;
  border: 1px solid firebrick;
  color: white;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  border-radius: 8px;
  cursor: pointer;
  width: 25%;
  height: 10%;
  margin-bottom: 1%;
  margin-top: 1%;
  font-size: 16px;
}
#inp_lang,
#out_lang {
  background-color: gainsboro;
  width: 25%;
  height: 10%;
  border-radius: 8px;
  color: firebrick;
  border: 1px solid green;
  text-align: center;
  font-size: 16px;
  margin-top: 1%;
  cursor: pointer;
}