html, html:hover {
  cursor: url("asset/cursor/cursor_1.gif"), auto;
  
  text-transform: lowercase;
  
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar{
  display:none;
}

a:hover, p:hover, img:hover, button:hover, span:hover{
    cursor: url("asset/cursor/cursor_1.gif"), auto;
}

.link{
    text-decoration: none;
    
    color: #2F5249;
}

@font-face{
    font-family: Butterfly Serenade;
    src: url("asset/font/Butterfly Serenade.ttf");
}

@font-face{
    font-family: Forget Days;
    src: url("asset/font/Forget Days.otf");
}

body{
    background-image: url("asset/image/background.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
    margin: auto;
    
    color: #2F5249;
    
    width: 100%;
    max-width: 1200px;
    max-height: 100vh;
    
    overflow: hidden;
}

a,p,ul,li,ol,span{
    font-family: Forget Days;
}

h1,h2,h3,h4,h5,h6{
    font-family: Butterfly Serenade;
    font-weight: 300;
    line-height: 0.3;
}

.header{
    
    display: grid;
    grid-template-columns: 5fr 1fr;
    
    align-content: center;
    justify-content: space-between;
    align-items: center;
    justify-items: center;
    
    border-image-source: url("asset/image/lace.webp");
    border-image-width: 10px; 
    border-image-slice: 65; 
    border-image-outset: 10px; 
    border-image-repeat: round;
    
    background-color: white;
    
    position: absolute;
    top: 15vh;
    left: 33vh;
    padding: 5px;
    
    width: 555px;
    height: 35px;
    
    z-index: 50;
    
}

.container{
    
    border-image-source: url("asset/image/lace.webp");
    border-image-width: 25px; 
    border-image-slice: 65; 
    border-image-outset: 25px; 
    border-image-repeat: round;
    
    background-image: linear-gradient(90deg, rgba(255,251,242), rgba(255,255,255,0.9));
    
    display: block;
    
    align-content: start;
    justify-content: space-between;
    align-items: center;
    justify-items: left;
    
    position: absolute;
    top: 27vh;
    left: 30vh;
    padding: 30px 20px 30px 70px;
    
    width: 480px;
    height: 350px;
    
    overflow-y: auto;
    overflow-x: hidden;
    
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    z-index: 50;
}

aside{
    
    border-image-source: url("asset/image/lace.webp");
    border-image-width: 25px; 
    border-image-slice: 65; 
    border-image-outset: 25px; 
    border-image-repeat: round;
    
    background-image: linear-gradient(90deg, rgba(255,251,242), rgba(255,255,255,0.9));
    
    display: block;
    
    align-content: center;
    justify-content: space-between;
    align-items: center;
    justify-items: center;
    
    position: absolute;
    top: 35vh;
    left: 110vh;
    padding: 5px;
    
    width: 135px;
    height: 180px;
    
    text-align: center;
    
    overflow-y: auto;
    overflow-x: hidden;
    
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    z-index: 50;
}

footer{
    display: block;
    
    position: absolute;
    
    bottom: 14vh;
    left: 70vh;
}

.bio-box{
    width: 80%;
    
    padding: 10px;
    
    border-image-source: url("asset/image/frame.png");
    border-image-width: 25px; 
    border-image-slice: 20; 
    border-image-outset: 1px; 
    border-image-repeat: round;
}

.text-box{
    display: grid;
    
    grid-template-columns: 3fr 6fr;
    
    text-align: left;
}

.repeat-divider{
    display: flex;
    gap: 0;
    
    margin: 20px auto 20px auto;
    
    flex-direction: row;
    align-items: center;
    align-content: center;

}

.divider{
    width: 50%;
}

.navi-list{
    display: flex;
    flex-direction: column;
    
    align-items: center;
    
    gap: 7px;
}

.h1-style1{
    font-size: 30px;
    
    margin-bottom: 25px;
    margin-top: 20px;
}

.h1-style2{
    font-size: 30px;
    
    color: #402828;
    
    margin-bottom: 25px;
    margin-top: 50px;
}

.h1-style2:before{
    content: url("asset/icon/ico2-before.webp");
    float: left;
    
    margin-right: 5px;
    margin-bottom: 6px;
}

.h1-style3{
    font-size: 30px;
    
    margin-bottom: 5px;
    margin-top: 10px
}

.fav-text{
    color: #402828;
    
    font-weight: 500;
    font-style: italic;
}

.fav-text::before{
    content: url("asset/icon/ico-before.webp");
    float: left;
    
    transform: scale(0.7);
    
    margin-right: 5px;
}

.img-behind1{
    position: absolute;
    
    background: #fffbf2;
    border: 2px solid #402828;
    
    padding: 10px 10px 75px 10px;
    
    width: 250px;
    height: 90px;
    
    top: 65vh;
    left: 87vh;
    
    z-index: 10;
}

.img-behind2{
    position: absolute;
    
    top: 12vh;
    left: 80vh;
    
    z-index: 1;
}

.img-behind3{
    position: absolute;
    
    top: 9vh;
    left: 104vh;
    
    z-index: 5;
}

.img-front1{
    position: absolute;
    
    top: 70vh;
    left: 109vh;
    
    z-index: 60;
}

.img-front2{
    position: absolute;
    
    top: 19vh;
    left: 23vh;
    
    z-index: 60;
}

.bookmark{
    width: 120%;
}

.backimg{
    width: 65%;
}

.img-lace{
    position: absolute;
    
    top: 0vh;
    left: 5vh;
    
    z-index: 1;
}

.squareimg{
    width: 30%;
    
    border: 2px solid #402828;
    
    aspect-ratio: 1/1;
    
    object-fit: cover;
    object-position: center;
    
    filter: saturate(0.5) brightness(1);
}

.laceimg{
    width: 74%;
}

.polaroid{
    width: 100%;
    
    filter: saturate(0.5) brightness(1);
}

.fox{
    width: 25%;
}

.tittle-page{
    font-size: 24px;
    font-weight: 400;
}

.btn-navi {
    
    display: inline-flex;
    align-items: center;

    overflow: hidden;
  
    font-family: sans-serif;
  
    cursor: default;
  
    border-image-source: url("asset/image/btn.png");
    border-image-width: 25px; 
    border-image-slice: 20; 
    border-image-outset: 1px; 
    border-image-repeat: round;
    
    color: #402828;
  
    width: 120px;
    height: 35px;
    padding: 0;
}

.btn-navi .btn-navi-ico {
  
  padding: 5px;
  
  display: flex;
  
  align-items: center;
  justify-content: center;
}

.btn-navi-text {
  padding: 5px;
  
  font-size: 14px;
}

.btn-navi:hover{
    color: #B5C99A;
    
    font-weight: 500;
    font-style: italic;
}



@media (max-width: 768px){

  body{
    max-width: 50%;
    max-height: none;
    
    overflow: auto;
    
    padding: 10px;
  }
  
  .header{
      width: 290px;
      
      top: 5vh;
      left: 5vh;
  }
  
  .container{
      width: 200px;
      padding: 10px 20px 10px 45px;
      
      top: 15vh;
      left: 10vh;
  }
  
  aside{
      left: 5vh;
      top: 64vh;
  }
  
  footer{
      left: 25vh;
      top: 68vh;
    
      z-index: 60;
  }
  
  
  .bio-box{
      width: 180px;
      
      padding: 10px;
  }
  
  .text-box{
      display: flex;
      flex-direction: column;
      
      padding: 10px;
  }
  
  a,p{
      text-align: justify;
      width: 100%;
      
      font-size: 12px;
  }
  
  .tittle-page{
      font-size: 18px;
      font-weight: 300;
  }
  
  .h1-style1, .h1-style2{
      line-height: 1;
  }
  
  .h1-style2{
      font-size: 24px;
  }
  
  .img-front1{
      left: 33vh;
      top: 83vh;
  }
  
  .img-front2{
      left: 4vh;
      top: 8vh;
  }
  
  .fox{
      width: 70%;
  }
  
  .bookmark{
      width: 100%;
  }
  
  .img-behind1{
      left: 14vh;
      top: 71vh;
      
      width: 210px;
  }
  
  .polaroid{
      width: 100%;
  }
  
  .img-behind2, .img-behind3{
      left: 0vh;
      display: none;
  }

} 
    
    
    
}