/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-family: Georgia;
  max-width: 800px;
  margin: 40px auto;
  line-height: 1.6;
  padding: 80px 30px 30px 30px;
  background-color: #f0f6ff;
  color: #e6f2e9;
  
  background-image: url("https://faunus.neocities.org/forest-dithered.png");
  background-size: cover;        /* fills entire screen */
  background-position: center;   /* keeps it centered */
  background-repeat: no-repeat;  /* stops tiling */
  background-attachment: fixed;  /* optional: subtle parallax */
}

p {
  margin-bottom: 10px;
}

a {
  color: #8bd48b;
}

.photograph {
  max-width: 90%;
  height: auto;
}
.floating-image {
  position: absolute;      /* stays relative to the screen */
  bottom:3vh ;            /* 75% down the viewport height */
  left: 50%;            /* move to middle horizontally */
  transform: translateX(-50%); /* true centering */
  z-index: 15;          /* ensures it sits above content */
  width: 1300px ;
  height: auto;
  pointer-events: none;
}
.pngtitle {
position: absolute;
top: 5%;  
width: 750px;
max-width: 100%;
height: auto;
/*pointer-events: none;*/
z-index: 9;
}

.overlay-gif {
  position: fixed;   /* relative to container */
  top: 0px;            /* adjust vertical position */
  left: 50%;            
  transform: translateX(-50%);
  width: 100%;         /* fixed size */
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.container {
  position: relative;   /* required for absolute positioning inside */
  z-index: 1;           /* content above GIF */
  max-width: 800px;
  margin: 60px auto;        
  padding: 60px;            
  background-color: #1b2a22;
  
  border-radius: 12px;     
}
.side-nav {
  position: absolute;
  left: -240px;       /* places it outside left edge of container; use 0 to place inside */
  top: 40px;          /* adjust vertical offset as needed */
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;

}
/*.side-nav img {
 /* width: 100%;
  /*height: auto;
  /*display: block;
 /* transition: transform 0.2s ease;
}*/

/*.side-nav img:hover {
 /* transform: scale(1.05);
}*/

.side-nav img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.18s ease;
  transform-origin: center;
}

/*.side-nav {
  position: fixed;
  left: 100px;        /* adjust slightly if needed */
/* bottom: 520px;   /* pushes it above the speaker */
/*width: 220px;    /* roughly speaker width */
/*display: flex;
  flex-direction: column;
  gap: 12px;
  z-index:5;
} */



.side {
  position: fixed;
  bottom: 0;
  width: 14%;
  height: auto;
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 4;
}

/* final resting positions */
.left { left: 0; }
.right { right: 0; }

.log { z-index: 0; width: 25%;}
.ferntop { z-index: 5; width: 6%; }
.fernbottom { z-index: 11; width: 7%;}
.moomin {
  position: fixed;
  bottom: 0;
  right: 9%;
  width: 9vw;
  z-index: 3;
  pointer-events: auto;
}

.moomin img {
  width: 100%;
  height: auto;
  display: block;
}

/* starting positions (off screen) */
.left {
  transform: translateX(-150%);
}

.right {
  transform: translateX(150%);
}

/* when page loads */
.page-enter .left {
  transform: translateX(0);
}

.page-enter .right {
  transform: translateX(0);
}

.page-exit .left {
  transform: translate(-150%, 80px) rotate(-6deg);
}

.page-exit .right {
  transform: translate(150%, 80px) rotate(6deg);
}

/*music player*/