@font-face {
    font-family: 'LeeSeoyun';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
      src: url('https://angelovin.neocities.org/font/Minecraftia-Regular.ttf');
  font-family: 'Minecraftia';
  font-display: swap;
}


body {
  width:1400px;
  background-image: url("img/diary-back.png");
  image-rendering:-webkit-optimize-contrast; 
  margin: 0px auto;
      text-align: center;
      padding: 20px;
}

.main {
width: 900px;
    height: 650px;
    border-image: url(https://angelovin.neocities.org/diary/img/lace.png) 103 round;
    border-width: 40px;
    border-style: solid;
    border-image-outset: 0px;
    border-radius: 0px 0px 0px 0px;
    margin: 0px auto;
    margin-top: 55px;
}
.main-b {
    width: 910px;
    height: 680px;
    margin-left: -5px;
    margin-top: -15px;
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
}


  .diary {
width: 890px;
    height: 670px;
    margin: 10px 10px auto;
    background: #fef8fc;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #fcedf6;
  }



  .pages {
    display: flex;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    height: 100%;
    border-radius: 10px;
    background: white;
  }

  .page {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
  }

  .page.left {
    border-right: 1px solid #f4f4f4;
    box-shadow: 1px 0px 0px 0px #f4f4f4;
  }
  
  .page.right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
  
  
  .lace2 {
    width: 335px;
    height: 67px;
    background-image: url(img/lace2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: -15px;
    margin-left: 23px;
  }

.main-b::-webkit-scrollbar {
  display: none;
}


  .left1 {
width: 136px;
    height: 95px;
    background-image: url(img/left1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: 53px;
    margin-left: 13px;
  }
  
    .left2 {
width: 181px;
    height: 462px;
    background-image: url(img/left2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: 130px;
    margin-left: 190px;
  }
  
  
  .left3 {
    width: 114px;
    height: 56px;
    background-image: url(img/left3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: 116px;
    margin-left: 286px;
  }

  .left4 {
width: 114px;
    height: 88px;
    background-image: url(img/left4.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: 344px;
    margin-left: 98px;
  }
  
  
    .left5 {
width: 116px;
    height: 72px;
    background-image: url(img/left5.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 999;
    margin-top: 383px;
    margin-left: 306px;
  }
  
  
      .left7 {
width: 193px;
    height: 76px;
    background-image: url(img/left7.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 992;
    margin-top: 350px;
    margin-left: -30px;
  }
  
        .left6 {
    width: 250px;
    height: 150px;
    background-image: url(img/left6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    position: absolute;
    z-index: 992;
    margin-top: 440px;
    margin-left: 4px;
  }
  
  
  
  .text1 { 
    font-size: 10px;
    color: lightgrey;
    z-index: 992;
    white-space: nowrap;
    margin-top: 15px;
    text-align: left;
    margin-left: 184px;
    font-family: 'Minecraftia';
}
  
    .text2 { 
font-size: 9px;
    color: #f7dded;
    z-index: 992;
    white-space: nowrap;
    margin-top: 36px;
    text-align: left;
    margin-left: -186px;
    font-family: 'Minecraftia';
}
  
      .text3 { 
font-size: 9px;
    color: lightgrey;
    z-index: 992;
    white-space: nowrap;
    margin-top: 105px;
    text-align: left;
    margin-left: -169px;
    font-family: 'Minecraftia';
}

    .text4 { 
    font-size: 9px;
    color: #f7dded;
    z-index: 992;
    white-space: nowrap;
    margin-top: 172px;
    text-align: left;
    margin-left: -186px;
    font-family: 'Minecraftia';
}


.page-top {
      height: 10%;

}

.page-content {
flex: 1;
    height: 90%;
    z-index: 999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.page-content::-webkit-scrollbar {
  display: none; 
  }

    .diary-card {
width: 305px;
    padding: 15px;
    border-radius: 15px;
    border: 2px solid white;
    outline: 1px solid #f5d5e8;
    background: #fff;
    box-shadow: 0 0 0 1px #eee;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    background-image: url(https://angelovin.neocities.org/gallery/img/back.png);
  }
  
  .diary-card-in {
padding: 20px 20px;
    display: flex;
    flex-direction: column;
    margin: 0px;
    gap: 15px;
    background-color: white;
    border-radius: 15px;
    border: 1px dashed #f5d5e8;
    
  }

  .diary-date {
font-size: 13px;
    line-height: 1.6;
    text-shadow: 1px 0px #ecc5d7, 0px 1px #ecc5d7, -1px 0px #ecc5d7, 0px -1px #ecc5d7;
    color: white;
    word-break: break-word;
    text-align: left;
  }

  .diary-text {
    font-size: 12px;
    line-height: 1.6;
    color: #999;
    word-break: break-word;
    text-align: left;
  }

  .diary-image {
    margin-top: auto; 
  }

  .diary-image img {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
  }

  .image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .image-modal img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 12px;
  }
  
  body {
  -ms-overflow-style: none;
}

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

* {
    cursor: url(https://ashtoangel.ivyro.net/img/mouse.png), url(https://ashtoangel.ivyro.net/img/mouse.png), auto !important;
}