@import mixins

$content-height = 400px

html
	height: 100%
	
	body
		height: 100%
		color: rgb(80, 75, 70)
		background: linear-gradient(top, rgb(240, 235, 230), rgb(220, 215, 210));

h1, h2, h3, h4, h5, h6
	font-family: "Futura", "Helvetica Neue", Helvetica, sans-serif
	font-weight: normal

.product
	position: absolute
	top: 50%
	left: 50%
	width: 100%
	height: $content-height
	margin: -($content-height / 2) 0px 0px -50%
	
	.container
		height: 100%
		background: grayscale(255, 0.5)
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3)
		border-radius: 6px
		
		.row
			height: 100%
			
			.description, .image
				padding: 6px 10px
				box-sizing: border-box
			
			.description
				h1, h3
					text-align: center
				
				h1
					font-size: 40px
					line-height: normal
				
				h3
					color: rgb(150, 145, 140)
				
				.blurb
					margin: 38px 8px
					font-size: 16px
					
					p
						margin: 16px 0px
				
				.buttons
					text-align: center
					
					.btn
						width: 125px
						margin-left: 12px
			
			.image
				text-align: center
		
		footer
			margin-top: 8px
			color: grayscale(0, 0.25)