@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;
}

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

body {
  background-image: url('assets/background.webp'); 
  background-size: cover;
  background-attachment: fixed;
  background-repeat: repeat; 
  background-position: center center;
}

nav {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-around;
  margin: 0 30px 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}



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



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

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

h2 {
  font-size: 32px;
}

p {
  font-family: 'enchanced', sans-serif;
  font-size: 20px;
}

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

/*=== global 2: fonts====*/
/*=== index.html===*/

#disclaimer-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#disclaimer {
  background-image: url('assets/scroll2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  
  width: 90%;
  height: 90%;
  min-width: 800px;
  max-width: 1100px;
  position: relative;
}

#disclaimer h1 {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 40px;
}

#disclaimer p {
  position: absolute;
  top: 38%;
  left: 17%;
  width: 67%;
}

@media (max-width: 1200px) {
  #disclaimer p {
    line-height: 0.95;
    letter-spacing: -0.5px;
  }
}

#sign {
  background-image: url('assets/circle.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  top: 60%;
  left: 76%;
}

#sign:hover {
  background-image: url('assets/circleX.png');
}

#center-container {
  background-image: url('assets/background2.webp'); 
  background-size: auto;
  background-attachment: scroll;
  background-repeat: repeat; 
  background-position: center center;
  
  width: 60%;
  min-width: 400px;
  height: 100%;
  margin: 100px auto;
}

/*=== index.html===*/
/*=== main.html===*/

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

.post {
  background-image: url('assets/scroll.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
}

.post:has(.post-toggle:hover) {
  width: 490px;
}

.post_hidden {
  background-image: url('assets/scroll_hidden.png');
  height: 130px;
}


.post-toggle {
  cursor: pointer;
  background: transparent;
  border: none;
  margin: 0 70px;
}

.post-title {
  cursor: pointer;
  margin-top: 45px;
  margin-bottom: 35px;
}

.post-date {
  margin-left: 330px;
  margin-bottom: 15px;
}

.post-image {
  max-width: 40%;
  margin: 0 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;
}

.post-text {
  margin: 15px 130px;
}

/*=== main.html ===*/
/*=====kitties.html ====*/

#kitty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px; /* not margin because last kitty's link will be close to end of center-container. */
}

#kitty-image {
  max-height: 400px; 
  max-width: 400px;
}