* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
}

:root{
  --blue: #7691a3;
  --yellow: #e0c476;
  --pink: #e2a9ac;
  --brown: #705e52;
  --green: #859764;
}

:root{
  --outline-white:
  drop-shadow(-1px 0 0 #ffffff)
  drop-shadow(1px 0 0 #ffffff)
  drop-shadow(0 -1px 0 #ffffff)
  drop-shadow(0 1px 0 #ffffff);
}

@font-face{
  font-family: 'kingthings_trypewriter_2';
  src: url(/stylesheets/fonts/kingthings_trypewriter_2-webfont.woff),
       url(/stylesheets/fonts/kingthings_trypewriter_2-webfont.woff2);
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: 'dudu_calligraphy';
  src: url(/stylesheets/fonts/dudu_calligraphy-webfont.woff),
       url(/stylesheets/fonts/dudu_calligraphy-webfont.woff2);
  font-weight: normal;
  font-style: normal;
}

@keyframes fade-in{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

::-webkit-scrollbar{
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track{
  background: transparent;
}
 
::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background: #a18c7d;
}

::-webkit-scrollbar-thumb:hover{
  background: var(--brown); 
}

a{color: var(--brown); font-style: italic; text-decoration: none;}
a:hover{cursor: help; font-style: normal; text-decoration: none;}

::selection{
  color: var(--green);
  background: transparent;
}

.wrapper{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body{
  background-image: url(https://i.postimg.cc/hjFFSKLt/d05-bg-simple.gif);
  font-family: 'kingthings_trypewriter_2', 'Verdana', 'sans-serif';
  image-rendering: pixelated;
  color: var(--brown);
  scrollbar-width: thin;
  animation: fade-in 0.4s ease-in;
}

.diary{
  position: relative;
  z-index: 1;
  background-image: url(/images/diary/diary-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 720px;
  height: 630px;
  filter: drop-shadow(0 0 2px rgb(0, 0, 0, 0.4));
}

.entry-page{
  position: absolute;
  z-index: 2;
  right: 70px;
  top: 80px;
  background-image: url(/images/diary/page-bg.png);
  background-size: cover;
  width: 365px;
  height: 510px;
  transform: rotate(-4deg);
}

.entry-text{
  font-size: 17px;
  letter-spacing: -2px;
  line-height: 1.36;
  text-align: justify;
  padding: 35px 50px;
}

.camera{
  z-index: 999;
  bottom: -108px;
  right: -20px;
  transform: rotate(-10deg);
}

#camera-off{position: absolute; transition: all 0.2s linear;}
#camera-off:hover{cursor: help; opacity: 0;}

/*temp lawl*/

.micro-blog{
  position: relative;
  top: 90px;
  left: 53px;
  
  transform: rotate(3.8deg);
  width: 275px;
  height: 470px;
  overflow-y: scroll;
  animation: faaade 20s linear;
}

@keyframes faaade{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/**/

.nav{
  position: absolute;
  z-index: -1;
  top: 75px;
  left: -90px;
  transform: rotate(3deg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buttonz{
  position: relative;
  width: fit-content;
  top: 10px; 
  left: 10px;
  font-family: 'dudu_calligraphy'; 
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0, 0.4)); 
}

#creds:hover #creds-text{
  cursor: help;
  visibility: visible;
}

#creds-text{
  visibility: hidden;
}

/* MISC DECOR */

.decor{
  position: absolute;
  filter: var(--outline-white) drop-shadow(0 0 2px rgb(0, 0, 0, 0.3));
}

#stamp1{
  position: absolute;
  z-index: 1;
  bottom: 70px;
  right: 230px;
  transform: rotate(7deg);
}

#stamp2{
  position: absolute;
  z-index: 2;
  bottom: 34px;
  right: 180px;
  transform: rotate(-11deg);
}

#tape{
  position: absolute;
  z-index: 3;
  top: 70px;
  right: 190px;
  transform: rotate(-10deg);
  filter: drop-shadow(-1px -1px 2px rgb(0, 0, 0, 0.2));;
}

#clovers{
  bottom: 47px;
  right: -135px;
}

#paper1{
  z-index: -4;
  right: -45px;
  bottom: 140px;
  transform: rotate(9deg);
}

/* SHRINES */

#yukari1{
  position: absolute;
  z-index: -1;
  right: -28px;
  top: 60px;
  transition: all 0.7s ease;
}

#yukari2{
  z-index: -2;
  right: -28px;
  top: 60px;
  transition: all 0.7s ease;
}

.butterfly{
  position: absolute;
  opacity: 0;
  z-index: -3;
  right: -20px;
  top: 120px;
  filter: var(--outline-white)
}

#butterfly1,
#butterfly2{
  transition: all 1s ease;
}

.parakiss:hover #yukari1,
.parakiss:hover #yukari2{
  right: -60px;
  top: 50px;
  transform: rotate(10deg);
}

.parakiss:hover #butterfly1{
  opacity: 1;
  right: -170px;
  top: 100px;
  transform: rotate(40deg);
}

.parakiss:hover #butterfly2{
  opacity: 1;
  right: -154px;
  top: 13px;
  transform: rotate(15deg);
}

#yukari1:hover{
  opacity: 0;
}

#lis2-1{
  z-index: -2;
  bottom: 40px;
  left: -65px;
  transform: rotate(-10deg);
  transition: all 1s ease;
}

#lis2-2{
  z-index: -1;
  left: -35px;
  bottom: 10px;
  transform: rotate(-20deg);
  transition: all 0.9s ease;
}

.lis2:hover #lis2-1{
  left: -130px;
  bottom: 50px;
  transform: rotate(-25deg);
}

.lis2:hover #lis2-2{
  left: -100px;
  bottom: -10px;
  transform: rotate(-40deg);
}