*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		.app
			height: 100vh
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative
			.top
				display: flex
				align-items: center
				padding: 25px 0
			.middle
				width: 100%
				position: relative
				.img-container
					img
						width: 100%
						height: 60vh
						opacity: 0.7
						box-shadow: 0 10px 55px 5px rgba(0,0,0,0.27)
						mix-blend-mode: soft-light
				.show-box
					position: absolute
					top: 0
					z-index: 1
					width: 100%
					height: 100%
					display: flex
					align-items: center
					justify-content: center
			.bottom
				width: 100%
				flex: 1

*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		.app
			height: 100vh
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative
			.top
				display: flex
				align-items: center
				padding: 25px 0
				max-height: 100px
			.middle
				width: 100%
				position: relative
				.img-container
					img
						width: 100%
						height: 60vh
						opacity: 0.7
						box-shadow: 0 10px 55px 5px rgba(0,0,0,0.27)
						mix-blend-mode: soft-light
				.show-box
					position: absolute
					top: 0
					z-index: 1
					width: 100%
					height: 100%
					display: flex
					align-items: center
					justify-content: center
			.bottom
				width: 100%
				flex: 1

Add fix height to top line
Add fix height to top line
