$keyboardHeight : 100px;
$bottomHeight : 30px;

body, #container{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	background-color: black;

	#keyboard {
		position: absolute;
		bottom: $bottomHeight;
		left: 0px;
		height: $keyboardHeight;
	}

	#roll {
		width : 100%;
		height: calc(100% - #{$keyboardHeight + $bottomHeight});
		position: absolute;
		top: 0px;
		left: 0px;
	}

	#glow {
		width : 100%;
		height: calc(100% - #{$keyboardHeight + $bottomHeight});
		position: absolute;
		top: 0px;
		left: 0px;
	}

	#bottom {
		width: 100%;
		height: $bottomHeight;
		bottom: 0px;
		left: 0px;
		position: absolute;
		background-color: rgb(34, 34, 34);
		box-shadow: inset 0px 12px 30px -5px rgba(0,0,0,0.75);
	}
}

#container {
	opacity: 0.4;
	filter: blur(4px);
	$transitionTime : 0.2s;
	transition: filter $transitionTime, opacity $transitionTime;

	&.focus {
		filter: none;
		opacity: 1;
	}
}