//
//	fonts
//
@import url(http://fonts.googleapis.com/css?family=Roboto:400,200)


//
//	vars
//
$primary: #2980b9
$background: #fff
$background-img: url(../img/background.jpg)
$search-border: $primary
$search-hover: #6BB9F0
$font: 'Roboto', 'Consolas', 'Helvetica', sans-serif


//
//	page setup
//
*
  margin: 0
  padding: 0

html
  background: $background-img center center no-repeat
  background-size: cover

*::-webkit-input-placeholder
  opacity: 0.3

.total-container
  height: 100vh
  width: 100%
  background: $background
  opacity: 0.8
  font-size: 11px
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  -ms-font-smoothing: antialiased
  -o-font-smoothing: antialiased
  font-smoothing: antialiased

p, li, a
  color: $primary
  font-family: $font
  font-weight: 400
  letter-spacing: 2px

.container
  height: 340px
  width: 90%
  position: absolute
  margin: auto
  top: 0
  left: 0
  right: 0
  bottom: 0

//
//	favorites
//
.favorites
  width: 90%
  margin: 10px auto 0 auto
  text-align: center

.favorites p
  border-bottom: 1px solid $primary
  padding-right: 100%

.list
  display: inline-block
  width: 20%
  margin: 0 15px
  vertical-align: text-top

.list ul
  list-style-type: none

a
  text-decoration: none
  display: block
  padding: 3px
  &:hover
    color: $background
    background: $primary


//
//	google pages
//
.googles
  width: 90%
  margin: 25px auto
  text-align: center

.googles p
  display: inline-block
  width: 25%
  margin: 10px 10px
  border: 1px solid $primary


//
//	search bars
//
form
  width: 90%
  margin: auto
  padding: 5px
  text-align: center
  position: relative

.search
  width: 400px
  height: 15px
  margin-right: -4px
  padding: 5px
  background: $background
  font-family: $font
  font-size: 12px
  letter-spacing: 0.5px
  color: $primary
  border: 1px solid $search-border
  &:hover
    border: 1px solid $search-hover
  &:focus
    outline: none
    border: 1px solid $search-hover

.go
  height: 27px
  width: 40px
  background: $background
  color: $primary
  border: 1px solid $primary
  &:hover
    background: $primary
    color: $background
    cursor: pointer
  &:focus
    outline: none