html
  background url('../images/bg-teal-pattern.png')
  font 300  1em $bodyType
  color $tertiary

a
  font 300 1em $titleType
  color $highlight
  text-decoration underline
  object-transitions(.1s)

a:hover
    color lightness($highlight, 90%)
    background $primary

svg.icons
  width 20px
  fill $secondary
  
h1, h2, h3, h4, h5, h6
    color $secondary !important
    font-weight 600 !important

#loader
  position fixed
  z-index 2000
  height 100%
  width 100%
  display flex
  align-items center
  justify-content center
  i
    color $tertiary 
    
.blog-container
  width 100%
.main-container
  margin 0 auto
  z-index 10
  position relative
  section
      header
        width 100%
        max-width 1024px
        #float-bg
          background url('../images/bg-teal-pattern.png')
          position absolute
          z-index 5
          //height 100%
          //width 100%
          //display flex
          //align-items center
          //justify-content center
          isolation isolate
          opacity 0
          left 20%
          img
            width 250px
            mix-blend-mode multiply



        position relative
        width 100%
        font-size 1em
        padding 20px
        opacity 0
        color $tertiary

        #header-one, #header-two
            z-index 10
            position relative
            label#the-title a
                font 500 2em $titleType
                width 97px
                height 100px;
                color $secondary
                text-decoration none
                display block
                word-break: break-all;
            

        

/**
-------------------------------
-- Responsive
-------------------------------
**/

@media only screen and (max-width: 640px)
  .main-container
    .content
      #the-intro
        font-size: 31px;
        line-height: 35px;

@media only screen and (max-width: 480px)
  .main-container
    .content
      #the-intro
        font-size: 25px;
        line-height: 33px;
      #index-display
          span, a
             font 400 1.2em $bodyType


@media only screen and (max-width: 375px)
    
  .main-container
    .header
      width 90%
      .header-desc
        h1
          line-height: 1rem;
          font-size: 3.3rem;
        span a
            color $white
            width 250px
            font-weight 300
            display inline-block
            word-break: break-all;
            font 300 7em/1em $titleType
            text-decoration none
            margin 0 0 50px 0
        #the-intro
            color $secondary
            opacity 0
            font 400 1.8em $titleType
            display inline-block
            width 95%
        #item-intro
            width 95%
            label
              font-size 2em

    .content
      #the-intro
        font-size: 24px;
        line-height: 33px;
      #index-display 
        label
          font-size 7em
        #recent-work, #recent-blog
            float none
            display block
            margin 0 auto
            text-align left
            padding-bottom 30px

@media only screen and (max-width: 320px)
  .main-container
    .header
      .header-desc
        h1
          line-height: 1rem;
          font-size: 2.9rem;

    .content
      #the-intro
        font-size: 19px;
        line-height: 28px;
