* {
  margin: 0;
  padding: 0;
  font-family: "Courier New", Courier, monospace;
}
:root {
  --primary-color: #f2c94c;
}
.header-text {
  background-color: var(--primary-color);
  padding: 1.5rem 0;
  width: 100%;
  text-align: center;
}
.container {
  width: 40%;
  margin: 2rem auto;
}
.input-style {
  width: 100%;
  display: block;
  padding: 1rem;
}
.translate-style {
  width: 100%;
  display: block;
  padding: 1rem;
  border: 1px solid black;
  height: 60px;
}
#translate-btn {
  padding: 1rem 2rem;
  background-color: var(--primary-color);
  border: none;
  margin: 1.5rem 0;
}
.footer {
  padding: 1rem 30%;
  background-color: var(--primary-color);
  position: fixed;
  bottom: 0;
  text-align: center;
}
.footer h2 {
  text-align: center;
}
#error-text {
  color: red;
  font-weight: bold;
}
@media (max-width: 480px) {
  .container {
    width: 90%;
  }
  .input-style {
    width: 90%;
  }
  .footer {
    padding: 1rem 5%;
  }
  .translate-style {
    margin-bottom: 90%;
    width: 90%;
  }
}