@import "base"




/* =Global */


body, input, textarea 
  margin: 40px
  color: $color
  background: $bgColor
  font:  16px/1.625em 'Varela Round',"lucida grande",tahoma,sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased


h1,h2,h3,h4,h5,h6 
  font-family: 'Terminal Dosis', 'lucida grande', tahoma, sans-serif
  line-height: 1em
  font-weight: 600
  margin-bottom: .5em

h1
  font-size:  72px
  line-height: .5em
  margin-bottom: .3em
  small
    font-size: 20px
  &:hover
    .char1
      color: greenyellow
    .char2
      color: indianred
    .char3
      color: khaki
    .char4
      color: lightsteelblue
    .char5
      color: violet
    .char6
      color: skyblue
    .char7
      color: lightseagreen
    .char8
      color: tan
    .char9
      color: darkmagenta
    .char10
      color: tomato
    .char11
      color: goldenrod


h2
  font-size:  40px
  line-height:  1.2em
  text-align: center

h3
  font-size:  16px	
  letter-spacing: 0.1em
  text-transform: uppercase

h4
  font-size: 20px
  margin-bottom: 1.25em

p 
  margin-bottom: 1.25em


strong 
  font-weight: bold



/* Forms */
input[type=text],
input[type=password],
textarea 
  background: #fafafa
  +box-shadow(inset 0 1px 1px rgba(0,0,0,0.1))
  border: 1px solid #ddd
  color: #888
  +border-radius($radius)



input[type=text]:focus,
textarea:focus 
  color: #373737

textarea 
  padding-left: 3px
  width: 98%

input[type=text] 
  padding: 3px

/* Links */
a
  color: $blue
  text-decoration: none
  &:hover
    color: scale-color($blue, $lightness: 50%)


header
  padding-bottom: 40px
  text-align: center
  
.imageSection
  +clearfix
  margin-bottom: 80px
  .imageWrap
    width: 400px
    height: 300px
    float: left
    position: relative
    margin-right: 20px
    border: 1px solid #444
    background: url(../img/dark_checkered_bg.png)
    .targetImage
      position: absolute
      top: 50%
      left: 50%
      margin-left: -200px
      margin-top: -150px
      
  .colors
    width: 400px
    float: left
    .function
      clear: left
      margin-bottom: 10px
      .swatches
        .swatch
          width: 40px
          height: 20px
          margin: 0 4px 4px 0
          background: #ddd
          float: left
          +transition(all .2s)
          &:hover
            +scale(1.2, 1.2)
            +box-shadow(0 1px 10px rgba(0,0,0,1))
          &:first-child
            +border-left-radius($radius)
          &:last-child
            +border-right-radius($radius)
  
canvas
  display: none