/*BOX*/
body{padding:0;margin:0;background:url('bg.png');background-color:#0078a5;}
#header{
	background: linear-gradient(#0a4978, #0078a500);
	text-align: center;
}
#header img{height:100%;}
#header h1 {margin:0;font-size: 8vh; font-family: 'Permanent Marker', cursive; color: white;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;}
#footer {
    background: linear-gradient(#0078a500, #0a4978);
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 0;
}
#scramble_box, #unscramble_box {
	position: relative;
	width:100%;
	display: block;
	color:white;
	text-align:center;
}
#scramble_button {
	border-radius: 10px;
	margin-top: 10px;
	background: white;
	width:auto;
	padding: 3px;
}
#scramble_box button {min-width:16%;width: auto;
font-size: 1.5em;}
#unscramble_box{background:red;}
/*INPUT*/
#scramble_input, #unscramble_input{transition: .5s;width:85%;margin-top:20px;border-radius: 2px;font-size: 4vh;position: sticky; top: 0;height:90px;}
#scramble_input:focus {height:250px;}
#unscramble_input{}
/*OUTPUT*/
#scramble_output, #unscramble_output{
	font-size: 3em;
	font-family: sans-serif;
	background: rgba(0,0,0,.7);
	margin: auto;
    margin-top: auto;
	width: 86%;
	box-sizing: border-box;
	margin-top: 2em;
	margin-bottom: 5em;
	z-index: 1;
}
#scramble_output{}
#unscramble_output{}