body
{
	background: #F0FFFF;
}

.container
{
	width: 100%;
	height: 100%;
	background: #F0FFFF;
				
	/* add flexbox style */
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-flow: wrap;
}

.box
{
	width: 20%;
	height: 500px;
	background: #FDF5E6;
	margin: 20px;
	box-sizing: border-box;
	font-size: 50px;
}

.inputBox
{
	width: 40%;
	height: 500px;
	background: #F0FFFF;
	margin: 10px;
	box-sizing: border-box;
	font-size: 50px;
}

.outputBox
{
	width: 30%;
	height: 500px;
	background: #F0FFFF;
	margin: 20px;
	box-sizing: border-box;
	font-size: 50px;
}

.table-row
{
	display: table;
	width: 80%;
	margin: 15px auto;
	font-family: sans-serif;
	background: white;
	padding: 12px 0;
	color: /*#555*/#F0FFFF;
	font-size: 13px;
	box-shadow: 0 1px 4px 0 #F0FFFF;
}

.table-cell
{
	display: table-cell;
	width: 30%;
	text-align: center;
	padding: 10px 0;
	border-right: 2px solid /*#d6d4d4*/#FDF5E6;
	vertical-align: middle;
}

.btnheading{
	background-color: #4CAF50;
	color: #FFFFFF;
	font-size: 16px;
	padding: 10px 16px 10px 16px;
	margin: 10px 8px 10px 12px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	
}	
.btBreakingTag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 20px 10px 28px;
	margin: 10px 16px 10px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	
	
}	
.btsupertag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 4px 10px 3px;
	margin: 10px 8px 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.btsubtag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 4px 8px 14px;
	margin: 10px 16px 10px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.bthorizontaltag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 12px 10px 4px;
	margin: 10px 9px 10px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;

}
.btstrongtag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 23px 10px 23px;
	margin: 10px 10px 10px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.btemphasizedtag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 6px 10px 0px;
	margin: 10px 13px 10px 9px;
	text-align: center;
	text-decoration: none;
	display: inline-block;

}
.btorderedtag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 8px 10px 24px;
	margin: 10px 14px 10px 6px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}
.btunorderedtag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 10px;
	margin: 10px 10px 10px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;


}
.btdescriptiontag{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 10px 7px 10px 11px;
	margin: 10px 14px 10px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;

}


iframe
{
	border: 2px solid #ddd ;
	background-color: white;
	height: 88%;
	width: 100%;
	display: flex;
}
			
textarea
{
	border: 5px solid #ddd;
	height: 100%;
	width: 80%;
	text-align: left;
	display: flex;
}

.runcodebtn
{
	background-color: #4CAF50;
	color: white;
	font-size: 16px;
	padding: 15px 26px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
}

.column {
  float: left;
  width: 40%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Add responsive media quaries */
@media screen and (max-width: 1200px)
{
	.box
	{
		width: 40%;
	}
}
			
@media screen and (max-width: 600px)
{
	.box
	{
		width: 90%;
	}
}

/*  ----------------------------- */
@media screen and (max-width: 1200px)
{
	.inputBox
	{
		width: 40%;
	}
}

/*  ----------------------------- */
@media screen and (max-width: 600px)
{
	.inputBox
	{
		width: 90%;
	}
}

/*  ----------------------------- */
@media screen and (max-width: 1200px)
{
	.outputBox
	{
		width: 40%;
	}
}

/*  ----------------------------- */
@media screen and (max-width: 600px)
{
	.outputBox
	{
		width: 90%;
	}
}