SASS Style File

style.sass

@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand|Slabo+27px')

$f-stack-one: 'Just Another Hand', cursive
$f-stach-two: 'Slabo 27px', serif
$body-color: #111
$body-line-height: 1.2
$main-width: 1080px
$white_color_100: rgba(255,255,255,1)

=border-radius($radius)
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	border-radius: $radius

body 
	font-family: $f-stach-two
	color: $body-color
	line-height: $body-line-height

#container
	width: $main-width
	margin: 0 auto
	margin-top: 20px
	display: flex

.box
	width: 213px
	height: 150px
	float: left
	padding: 20px
	background: #E3F2FD
	border: 1px solid #e3e3e3

.box p 
	text-align: center

@import nav

.btn-red 
	+border-radius(5px)
	font-family: $f-stach-two
	font-size: 13px
	text-transform: uppercase
	color: $white_color_100
	background: #e84545
	text-decoration: none
	padding: 20px 55px

.btn-red:hover 
	background: #ff0000
	text-decoration: none

.message
	border: 1px solid #ccc
	padding: 10px
	color: #333

.success
	@extend .message
	border-color: green

.error
	@extend .message
	border-color: red

.warning 
	@extend .message
	border-color: yellow