:root {
	font-size: 24px;
  }
  @media (min-width: 300px) {
	:root {
	  font-size: 18px;
	}
	h1 {
		font-size: 1.2em
	}
  }
  @media (min-width: 400px) {
	:root {
	  font-size: 20px;
	}
	h1 {
		font-size: 1.5em
	}
  }
  @media (min-width: 768px) {
	:root {
	  font-size: 30px;
	}
  }
  @media (min-width: 992px) {
	:root {
	  font-size: 40px;
	}
  }
  @media (min-width: 1200px) {
	:root {
	  font-size: 45px;
	}
  }

  .class {
	font-size: calc(1em + 1vw);
  }

#container {
	width: auto;
	max-width: 70ch;
	text-align: center;
	margin: auto;
	position: relative;
}

#content {
	/* margin: 2em; */
	size: 5em;
	text-align: center;
	/* float: center; */
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
}


.outputSample {
	/* margin: 5px; */
	/* size: 5em; */
	text-align: center;
	/* padding: 2ch; */
	/* background-color: rgb(250, 250, 255); */
}

/* #content { */
	/* margin: 5px; */
	/* float: middle; */
	/* size: 5em; */
	/* text-align: center; */
	/* width: auto; */
/* } */

#output {
	margin: 5px;
	size: 5em;
	text-align: center;
	padding: 2ch;
	/* background-color: rgb(230, 200, 255); */
}
#rhys {
	margin: 5px;
	size: 0.5em;
	text-align: right;
	padding: 2ch;
	/* background-color: rgb(230, 200, 255); */
}

#grammar {
	padding: 2ch;
	margin: 5px;
	text-align: center;
	/* background-color: rgb(200, 230, 255); */
}