.result {
	margin : 0 auto;
	text-align:center;
	font-size : large;
}

.result textarea {
	min-height : 350px;
	font: monospace;	
	font-weight : bold;
}

.result .in {
	display:inline-block;
	min-height : 500px;
	padding : 15px;
	width : 45%;
	float:left;
	border : 2.5px solid black;
	border-radius: 20px;
    box-shadow: #000 5px 5px 10px 3px;
}

.result .out {
	text-align:left;
	font: monospace;	
	font-weight : bold;
	display:inline-block;
	min-height : 500px;
	padding : 15px;
	overflow: hidden;
	width : 45%;
	margin : 0 5px;
	border : 2.5px solid black;
	border-radius: 20px;
    box-shadow: #000 5px 5px 10px 3px;
}

@media only screen and (min-width:150px) and (max-width:700px) {

	.result .in {
		display:inline-block;
		width : 90% !important;
		float:none;
		margin : 0 20px 0 20px;
	}

	.result .out {
		display:inline-block;
		width : 90% !important;
		margin : 0 20px 0 20px;
	}

}


@media only screen and (orientation:portrait) and (min-width:321px) {


	.result .in {
		display:inline-block;
		width : 90% !important;
		float:none;
		margin : 0 20px 0 20px;
	}

	.result .out {
		display:inline-block;
		width : 90% !important;
		margin : 0 20px 0 20px;
	}

}

@media only screen and (orientation:portrait) and (min-width:481px) {

	.result .in {
		display:inline-block;
		width : 90% !important;
		float:none;
		margin : 0 20px 0 20px;
	}

	.result .out {
		display:inline-block;
		width : 90% !important;
		margin : 0 20px 0 20px;
	}

}      


.result img {
	margin: 0 0 -10px 5px;
}

.result .in button {
	margin : 0 auto;
}

.out .var {
	display:inline-block;
	min-height : 400px;
	padding : 0 5x;
	float : left;
}

.out .log {
	font: italic bold 12px/30px Georgia, serif;
	display:inline-block;
	border: 0px !important; 
	border-left : 1px solid black !important;
	margin : 4px;
	padding : 5px;
	width : 70%;
}