main.css

:root {
  --primary-color: #fbbf24;
  --bar-color: #4b5563;
}

body {
  background-color: var(--primary-color);
}

textarea {
  display: block;
  margin: 1rem;
  height: 13rem;
  width: 50rem;
  text-align: center;
  border-radius: 1.1rem;
  border-color: black;
  padding: 4rem;
  min-width: 500px;
  max-width: 100%;
  min-height: 50px;
}

#output {
  border: 1px solid black;
  height: 13rem;
  width: 50rem;
  border-radius: 1.1rem;
  background-color: white;
  padding: 4rem;
  min-width: 500px;
  max-width: 100%;
  min-height: 50px;
}

li {
  display: inline;
  margin: 1rem;
}

.nav {
  border-top-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  background-color: var(--bar-color);
  margin: 1rem;
  font-family: "Fredoka One";
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  color: white;
}

.nav-header {
  text-align: left;
  color: white;
}
@media only screen and (max-width: 600px) {
  textarea {
    width: 25rem;
    min-width: 250px;
  }
  #output {
    width: 25rem;
    min-width: 250px;
  }
}