html,
body
  width: 100%
  height: 100%
  margin: 0
  padding: 0

body
  height: auto
  min-height: 100%
  box-sizing: border-box
  padding-top: 80px
  padding-bottom: 100px
  background: #eee

a
  color: teal
  transition: color 180ms ease-in-out
  &:hover
    color: darkcyan

button.button-primary
  background: teal
  transition: background 180ms ease-in-out
  &:hover
    background: darkcyan

textarea
  max-width: 100%
  min-width: 100%
  height: 100px


form select[multiple]
  min-height: 100px

table
  border: 1px solid #ddd
  border-radius: 8px
  border-spacing: 0
  overflow: hidden

table th,
table td,
table th:first-child,
table td:first-child
  border: none
  padding: 7px 12px

table thead tr
  border-radius: 8px 8px 0 0
  &:last-child
    border-radius: 0 0 8px 8px

table thead tr,
table tr:nth-child(even)
  background: #eee

/* Material card styles */
.card-1
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
  transition: all 0.3s cubic-bezier(.25,.8,.25,1)
  &:hover
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)

.card-2
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)

.card-3
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)

.card-4
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)

.card-5
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)

.container
  max-width: 1200px

#main-nav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 64px
  background: teal
  color: white
  z-index: 20

  ul
    list-style: none
    display: inline-block

    li
      display: inline-block
      margin-left: 15px

  h4
    display: inline-block
    margin-left: 25px
    line-height: 64px

  a
    color: white
    font-size: 2.25rem
    line-height: 64px
    transition: all 200ms ease-in-out
  &:hover
    color: #eee
    font-size: 2.5rem

#main-content
  padding: 15px 25px
  background: white
  border-radius: 8px
  z-index: 10

#main-footer
  position: fixed
  bottom: 0
  left: 0
  width: 100%
  height: 64px

  p
    margin-bottom: 5px
    text-align: center