@keyframes down
      0%
        margin-bottom 0
        opacity 1
      100%
        margin-bottom -15px
        opacity .1
//
.cover-frame
  position relative
  min-width 100%
  height 100vh
  .bg-box
    width 100%
    height 100%
    &>img
      display block
      width 100vw
      height 100vh
      object-fit cover
      object-position center center
.cover-inner
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -100%)
  h1
    font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
    font-size 7rem
    margin 0
    opacity .95
  #subtitle-box
    font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
    font-size 3rem
    margin .5rem 0 1.5rem
  a, &
    color white
    text-decoration none
  video, img
    position relative
  .cover-logo
    width cover-logo-size


.cover-learn-more
  position absolute
  z-index 1
  bottom 10px
  left 0
  width 100%
  a > i
    font-size 3rem
    color white
    animation down 1s linear infinite
    &:hover
      color sea

.float_btns
  position sticky
  bottom 10rem
  right 50px
  z-index 9996
  text-align center
  transform scale(1.2)
  width: 50px
  float: right

#mask
  position fixed
  left 0
  top 0
  width 100%
  height 100%
  background-color rgba(0,0,0,.8)
  z-index 9998
  display none

.word_count
  margin-top 5px
  color darken(gray,30%)
  padding-bottom 1rem
  border-bottom 1px solid darken(froth-light,2%)

// Media Query
@media (max-width: 768px)
  .cover-inner
    transform translate(-50%, -70%);
    width 100%
    h1
      font-size 4.5rem
    #subtitle-box
      font-size 2rem
  
  .float_btns
    right 10px