@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700')

$alert: #78d25a
$devops: #00aab0
$devops-color: #fff
$ops: #804297
$ops-color: #fff
$dev: #f0860c
$dev-color: #fff
$ex: #808080
$ex-color: #fff

$main-font: Montserrat


html
	box-sizing: border-box
	*
		box-sizing: inherit
		font-family: $main-font

body
	margin: 0

img
	outline: none

a
	color: inherit

.container
	max-width: 1024px
	margin: auto

.alert
	position: fixed
	top: 0
	left: 0
	width: 100%
	padding: 8px 16px
	border-radius: 0 0 4px 4px
	background-color: $alert
	text-align: center
	font-weight: 700
	color: #fff

.logo
	text-align: center
	img
		margin-top: 6%
		max-width: 600px

.keep-studying
	text-align: center
	font-weight: 300
	font-size: 30px

.path
	h1
		font-weight: 600
		font-size: 28px
		margin-bottom: 8px

.devops-path
	h1
		border-bottom: 4px solid $devops
		color: $devops

.ex-path
	h1
		border-bottom: 4px solid $ex
		color: $ex

.course
	vertical-align: top
	display: inline-block
	width: 49%
	padding: 16px
	margin-bottom: 12px
	border-radius: 2px
	background-color: $ex
	font-size: 14px
	color: $ex-color
	transition: all 0.3s
	&:nth-child(odd)
		margin-left: 1%
	&:nth-child(even)
		margin-right: 1%
	&:hover
		opacity: 0.8
	
	h2
		margin: 0
		font-size: 16px

.devops-course
	background-color: $devops
	color: $devops-color

.ops-course
	background-color: $ops
	color: $ops-color

.dev-course
	background-color: $dev
	color: $dev-color
	