#titlebox p{
	text-align: center;
    font-size:1.5em;
    margin-bottom: 10px;
	font-weight: bold;
}
.graybox{
	border: 3px solid #cecece;
	padding: 1em 0.5em;
}
#txarea,#result{
box-sizing: border-box;
	width: 100%;
}

#txarea,#result{
	margin: 2px auto 1em auto;
}
.cls{ text-align:right; }
.graybox button{ padding:2px;}
#comp{ width:98%; margin: auto;}
.btn{margin-right:10px;}
.r1,.r2{
	font-size:1.5em;
	font-weight: bold;
}
.r2{
	border-top: 1px solid black;
}
.r3{position: relative;}
.r3:before{
	content: "3";
	position: absolute;
	font-size:0.6em;
	top:-1em;
}
.em2{
	font-size:2em;
}
sup {
  font-size: 0.9em;
  vertical-align: top;
  position: relative;
  top: -0.5em;
}
span.fraction {
	display:inline-flex;
	flex-direction:column;
	vertical-align:middle;
	text-align:center;
}
span.fraction > span:nth-of-type(1) {
	padding:0 0.5em;
	border-bottom:1px solid black;
}
span.fraction > span:nth-of-type(2) {
	padding:0 0.5em;
}