@font-face {
  font-family: 'fantasy'; 
  src: url(/fonts/font.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'oldlondon'; 
  src: url(/fonts/OldLondon.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'enchanced'; 
  src: url(/fonts/font2.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=21431), auto;
}

body {
  background-image: url('../assets/background_table.webp'); 
  background-size: cover;
  background-attachment: fixed;
  background-repeat: repeat; 
  background-position: center center;
  
  width: 100vw;
  height: 100vh;
}

main {
  background-image: url('../assets/book.webp'); 
  background-size: contain;
  background-repeat: no-repeat; 
  background-position: center;
  
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 1000px;
}

main:has(#lp-corner:hover) {
  background-image: url('../assets/book_lp.webp'); 
}

main:has(#rp-corner:hover) {
  background-image: url('../assets/book_rp.webp'); 
}



/*==== global 1 ====*/
/*=== global 2: fonts====*/



h1, h2, h3 {
  font-family: 'fantasy', sans-serif;
  text-align: center;
  letter-spacing: 1.5px;
}

h4, h5, h6 {
  font-family: 'enchanced', sans-serif;
  text-align: center;
  letter-spacing: 1.5px;
}

h1 {
  font-size: 60px;
  padding: 15px 100px;
}

h2 {
  font-size: 48px;
}

h3{
   font-size: 36px;
}

h4 {
  font-size: 24px;
}

p {
  font-family: 'enchanced', sans-serif;
  font-size: 24px;
  letter-spacing: 0.4px;
  line-height: 1.03em;
}

a {
  font-family: 'enchanced', sans-serif;
  font-size: 32px;
  color: black;
}

a:link {
  text-decoration: none;
}

.text-center {
   text-align: center;
}



/*=== global 2: fonts ====*/
/*=== bookshelf ===*/

.bookshelf {
  width: 900px;
  height: 824px;
  margin: auto;
  position: relative;
}

.bookshelf::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/bookshelf.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  filter: drop-shadow(0 0 40px rgba(0,0,0,0.8));
  
  pointer-events: none; 
}

.book {
  position: absolute;
  display: flex;
  justify-content: center;
}

.book h3 {
  opacity: 0;
  transition: 0.3s;
}

.book:hover {
  box-shadow: 0 0 15px 5px #3498db;
  text-shadow: 0 0 5px #fff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff
}

.book:hover h3 {
  opacity: 1; 
}

#book1 {
  width: 40px;
  height: 169px;
  top: 29%;
  left: 62.4%;
}

#book2 {
  top: 79%;
  left: 36.4%;
  width: 11px;
  height: 152px;
 
}

/*=== bookshelf ===*/
/*=== title ====*/
.title_page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.author {
  font-weight: 100; 
}

.chapter {
  display: flex;
  justify-content: space-between;
  
}

.chapter:hover{
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff; 
}

.chapter p {
  font-size: 32px; 
}

.neocities-logo {
  display: block;
  max-width: 150px;
  margin: 0 auto;
}
/*=== title ====*/
/*=== chapters ====*/



.page {
  position: relative;
  width: 38vw;
  height: 77vh;
  padding: 5vw;
  padding-bottom: 90px;
  max-width: 620px;
  max-height: 780px;
}

#left-page {
  margin-left: 4%;
}

#right-page {
  margin-right: 4%;
}



.page-edge {
  display: block;
  width: 128px;
  height: 128px;
}

#lp-corner {
  position: absolute;
  top: 76%;
  left: 10%;
}

#rp-corner {
  position: absolute;
  top: 76%;
  right: 10%;
}

/* ==== posts ====*/

#blog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.post {
  display: flex;
  flex-direction: column;
}

.post-date {
  text-align: end;
}

.post-image {
  max-width: 90%;
  max-height: 30vh;
  margin: 10px auto;
  
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.modal-image-container {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
}

.modal-image {
  max-width: 95%;
  max-height: 95%;
  cursor: zoom-out;
}

.post-image {
  cursor: zoom-in;
}