$color_blue: rgb(65,125,199)

*
  font-family: 微軟正黑體
  cursor: url(https://ani.cursors-4u.net/symbols/sym-9/sym824.ani), url(https://ani.cursors-4u.net/symbols/sym-9/sym824.png), auto 
  // debug      
  // border: 0.5px solid
  // header,footer
  //   display: none
  // section
  //   display: none
  // section#ability,#weapon
  //   display: block
body
  height: 2000px
  
nav.navbar.fixed-top.navbar-expand-lg.navbar-light
  transition-duration: 0.5s
  height: 50px
  
  a.nav-link
    color: #000
    &:hover
      color: blue
      // font-size: 20px
      // -webkit-text-stroke: 1px blue
  
header.jumbotron,footer.jumbotron
  padding-top: 0px
  text-align: center
  margin-bottom: 0px
  padding-bottom: 0px
  background-color: #fff
  .container
    position: relative
    padding: 200px
    background-image: url(https://i.imgur.com/2qYoGvn.png)
    background-size: cover
    // background-attachment: fixed
    background-position: 60% 0% 
    
    h4
      color: rgba(255,255,255,0.5)
    hr
      max-width: 100px
      border-color: #eee
      border-width: 5px
    #my_video
      height: 100%

section
  padding: 50px 0px
    
    
section#ethnicity
  background-color: $color-blue
  padding-top: 0px
  .container
    padding: 50px
    text-align: center
    .col-md-5.img
      background-image: url(https://webstockreview.net/images250_/stitch-clipart-cartoon-2.png)
      background-size: cover
      height: 260px
      mix-blend-mode: multiply
      filter: saturate(4) contrast(1.2) brightness(1.5)
      
    .col-md-7
      padding-top: 5px
      display: flex
      flex-wrap: wrap
      justify-content: center
      align-items: center
      // h1
      //   margin-top: 60px

section#basicInfo
  background-color: lighten($color_blue,35)
  h3
    text-align: center
      
section#ability
  background-color: $color_blue
  text-align: center
  color: #eee
  h2 
    font-weight: bold
  p
    color: rgba(white,0.5)
  img
    width: 100%
  .imgattr
    height: 200px
    margin: 20px
    overflow: hidden
  img.agility
    width: 200%
    transform: translate(-50%,0%)
  img.dex
    transform: translate(0%,-5% )
  img.strength
    width: 200%
    transform: translate(-50%,-5%)
  img.vitality
    width: 300%
    transform: translate(-33%,-10%)
  img.sage
    width: 125%
    height: 245%
    transform: translate(-10%,-17%)
  img.magic
    width: 200%
    transform: translate(-40%,-15%)

section#background
  background-color: lighten($color_blue,35)
  text-align: center
  .col-md-4.img
    background-image: url(https://png.pngtree.com/png-clipart/20200224/original/pngtree-continuous-line-drawing-of-happy-pregnant-woman-silhouette-picture-of-mother-png-image_5231087.jpg)
    background-size: 100% 100%
      
    mix-blend-mode: multiply
    height: 400px
    .cross
      -webkit-text-stroke: 2px red
      -webkit-text-fill-color: transparent
      position: absolute
      right: 30%
      top: 50%
      font-size: 100px
  .col-md-8
    .row
      .col-md-4
        i
          font-size: 50px
    .col-md-12
      text-align: left
      padding-top: 10px

section#skill
  background-color: $color_blue
  color: #eee
  .row
      .col-md-6.Magitech
        background-image: url(https://i-ogp.pximg.net/c/w1200_q80_a2_g1_u1_cr0:0:1:0.362/img-master/img/2014/09/18/00/36/22/46041347_p0_master1200.jpg)
        background-size: 120% 100%
        height: 300px
        background-position: -50px
        overflow: hidden
        transform: translate(0%,15% )
      .col-md-6.shooter
        background-image: url(https://vovo2000.com/images/53826.jpg)
        background-size: 100% 150%
        height: 300px
        background-position: 0px -10px
        transform: translate(0%,15% )
      .col-md-6.ranger
        background-image: url(https://pbs.twimg.com/media/D9bf6c9VUAAPMzP.jpg)
        background-size: 100% 100%
        background-position: -10px 0px
        height: 500px
        mix-blend-mode: multiply
      .col-md-6.enhancer
        background-image: url(https://img.komicolle.org/2015-02/14232084649029.jpg)
        background-size: 120% 100%
        background-position: -50px 0px
        height: 300px
      h2#enhancer
        padding-bottom: 55px
        
section#language
  background-color: lighten($color_blue,35)
  .row
    text-align: center
    
section#weapon
  background-color: lighten($color_blue,35)
  color: #000
  .row
    
    .weapenimg
      width: 33%
      background-size: 110% 100%
      background-position: center center 
      height: 300px
    .blank
      width: 33.5%
      background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTnK-uT3n4G9_QpCBFyNl0qTp6sbT7nFPMomA&usqp=CAU)
      
    .bow
      background-image: url(https://cdn.kiranico.net/file/mhworld-kiranico/images/wp/factory/bow/ZehgguyN.jpg)
      background-size: 180% 100%
    .gun
      background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ1j0zudy75AHThjBQjaUtyNu57HhV_BUiR1A&usqp=CAU)
      background-size: 100% 70%

      
    .col-md-12
      padding: 0px
      
      table
        color: #eee
        padding: 0px    
        margin-right: auto
        margin-left: auto
        th,td
          width: 33%
          text-align: center

section#armor
  background-color: $color_blue
  color: #eee
  .col-md-3
    overflow: hidden
    height: 220px
    margin-top: 5%
    img
      left: 35%
      top: -15%
      position: relative
      transform: translate(-40%,-15%)
  .col-md-9
    .garden,.soft
      font-size: 30px
    p
      margin-left: 15px

section#accessories
  background-color: lighten($color_blue,35)
  hr.title
    border-width: 5px  
  .col-md-3
    height: 200px
  .col-md-9
    padding-top: 5%
  .col-md-3.magisphere
    background-image: url(https://www.fundesigncn.com/wp-content/uploads/2019/02/10-naolito.jpg)
    background-size: cover
    background-position: 0px -30px 
  .col-md-3.headkerchief
    background-image: url(https://i.pinimg.com/originals/8d/e0/2f/8de02fbd3388f26aa4a3d8a5209c4a0c.jpg)
    background-size: 203%
    background-position: 95% 0px 
  .col-md-3.gunbelt
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNM0QWXVGsTRlxXvPzxhZDuqxq2RWdstHbig&usqp=CAU)
    background-size: 200%
    background-position: 45% 45%  
  .col-md-3.magazine
    background-image: url(https://e7.pngegg.com/pngimages/929/7/png-clipart-anime-light-novel-aria-the-scarlet-ammo-mf-bunko-j-mangaka-anime-computer-computer-wallpaper-thumbnail.png)
    background-size: 400%
    mix-blend-mode: multiply
    background-position: 30% 70% 
  .col-md-3.quiver
    background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KW1Zwwo4NUX4oFJZEHLbXK9QlSPcU_oAlcQk2fVPCsxcPaVFVgGhVCv6ygOUhzx_LafTRF5MiJhZWCgfLmDLfQhGxUppYoi-3A8d_z2gS3-UBoN2DwdoLHcFQ6aViD8lTvyLvsg8fpup_NzXJ9-n51Rp-OErc)
    background-size: 100% 100%
    
    
section#point
  background-color: $color_blue
  color: #eee
  .row
    
    text-align: center
    .col-md-2
      padding-top: 20px
    .col-md-2.life
      font-size: 25px
      .col-12
        padding: 6px
section#item
  background-color: lighten($color_blue,35)
  h3
    font-weight: bold
  p
    border-bottom: 5px solid $color_blue
  .imgbox
    padding-top: 10px
    overflow: hidden
    img
      height: 200px
      position: relative
      left: 50%
      transform: translate(-50%)

footer.jumbotron
  // position: fixed
  // height: 1000px
  background-color: rgba(255,255,255,1)
  .background
    height: 1000px
    
    position: relative
    input
        width: 50%
        position: relative
        left: 50%
        top: 50%
        font-size: 30px
        transform: translate(-50%,-60%)
        background-color: rgba(255,255,255,0.8)
        mix-blend-mode: screen
        z-index: 10
    h1
      top: 20%
      background-color: rgba(0,0,255,0)
      font-weight: 900
      // width: 70%
      // -webkit-text-stroke: 2px black
      position: relative
      mix-blend-mode: screen
      z-index: 10
    iframe
      position: absolute
      top: 0px
      left: -10%
      width: 120%
      height: 100%
      border: 0px
      mix-blend-mode: luminosity