*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600&display=swap');
body{
	text-align:center;
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;;
}
#bgwrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size:500px;
    background-repeat: repeat;
    background-image: url('bg.png');
	background-attachment: fixed;
}
header{
	margin: 2em auto 3em auto;
}
header h2{
	font-weight: normal;
	font-size:1.2em;
}
#wrap{
	margin:0 auto;
}
#file{
	max-width: 20em;
	font-family: inherit;
}
#order{
	font-family: inherit;
}
#controls{
	display: inline-block;
	margin:auto 1em;
	line-height: 1.3em;
	text-align: center;
	vertical-align: top;
	height:420px;
	min-width: 20em;
	position:relative;
	border:1px solid rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.65);
	position: relative;
}
form{
	padding:1em 1em 0.7em 1em;
	font-family: inherit;
	text-align: left
}
footer{
	margin-bottom: 3em;
}
#textareacont{
	display: inline-block;
	height: 420px;
}
textarea{
	padding:0.2em;
	height:100%;
	font-size: 14px;
	font-family: inherit;
	width:440px;
	border:1px solid rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.65);
}
textarea::placeholder{
	color:#999;
	padding:0.15em;
}
p{
	margin-bottom:1.5em;
	line-height: 1.5em;
}
button{
	padding:0.5em 1em;
	display: inline-block;
	vertical-align: text-bottom;
	background-color: rgba(0,0,0,0.9);
	border:0px solid black;
	color:#fff;
	font-family: inherit;
}
button:hover{
	background-color: rgba(0,0,0,1);
}
ul{
	text-align: left;
	margin:1em auto;
	max-width: 40em;
}
#warning{
	display: none;
	max-width: 25em;
	color:#b00;
	background-color: rgba(255,255,255,0.3);
	padding:1em;
	border:1px dotted rgba(0,0,0,0.7);
	margin:auto;
	text-align: left;
	position:absolute;
	bottom:1em;
	right:1em;
}
#warning p{
	display: inline;
}
#app{
	margin:0 auto 1.5em auto;
}
#sepexample{
	margin:-1.5em 0em 1.5em 0em;
	font-family: inherit;
}
@media (max-width: 768px) {
	#app{
		max-width: 90%;
		margin: auto;
	}
	#controls{
		height:100%;
		margin:auto;
		text-align: center;
	}
	form{
		text-align: left;
	}
	#textareacont{
		display: block;
		margin-top: 2em;
		height:200px;
	}
	#warning{
		text-align:left;
		margin: auto auto 0.7em auto;
		position: relative;
	}
	textarea{
		width:80%;
		background-color: rgba(255,255,255,0.5)
	}
	#text{
		max-width: 90%;
		margin:2em auto;
	}
}
@media (max-width: 420px){
	h1{
		font-size: 1.7em;
	}
	textarea{
		width: 100%;
	}
}