/*****************
GENERAL
******************/
#scrollToEnd {
  position: fixed;       /* stays on screen */
  bottom: 18px;          /* distance from bottom */
  right: 18px;           /* distance from right */
  padding: 12px 18px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.9;
  transition: opacity 0.3s, background 0.3s;
  z-index: 999999;       /* 💯 always above everything */
  pointer-events: auto;  /* ✅ makes it always clickable */
}

#scrollToEnd:hover {
  opacity: 1;
  background: #000;
}
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
border-bottom: #00000000
  
}
body {
 background-color: #ffffff;
  color: #030202;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  min-height: 1--;
  position: relative;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;  
  margin-right: 555px;
  text-align: center;
}
#wrapper2 {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;  
  margin-right: 659px;
  text-align: center;
  border: 2px solid #000;
    border-radius: 10px;
      background: #ffffff20; /* faint background */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-top: 15px;
}
/* logo text */
#logo {
  text-align: center;
  margin: 0;
}

a {
  color: #000000;
}

h1 {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  margin: 15px 0;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  display: inline-block;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* 🔥 Modern gradient */
  background: linear-gradient(
    90deg,
    #00c6ff,  /* light aqua */
    #0072ff,  /* deep ocean blue */
    #00c6ff   /* loop back */
  );
  background-size: 200% auto;

  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* ✨ Smooth flowing animation */
  animation: gradientWave 5s ease-in-out infinite;
}

/* Gradient animation */
@keyframes gradientWave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

nav {
 font-family: 'helvetica', sans-serif;
  text-align: center;
  padding: 0px 0;
  margin: 20px 0 0;
  
}
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 14px;
     opacity: 0.39;  
  }



  nav ul li {
    width: 100%;
    max-width: 320px;
  }

  nav ul li a {
    display: block;
    text-align: center;
    padding: 14px 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(270deg,
      #ff9a9e,
      #fad0c4,
      #fbc2eb,
      #a6c1ee,
      #84fab0,
      #ff9a9e);
    background-size: 600% 600%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    animation: pastelShift 12s ease infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  nav ul li a:hover {
    transform: scale(1.03);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
  }

  @keyframes pastelShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}


nav ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}

nav li {
  display:inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
  
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/********
Page portfolio
*****/

#gallery {
margin: 0;
padding: 0;
list-style: none;


}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/********
Page: About
*********/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 0%;
}

/********
Page:Contact
*****/

.contact-info  {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
  
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
  
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
  
}

img {
  border: 1px solid black;
}
  

/*****************
COLORS
******************/



h1, h2 {
  color: #000000;
}
/* nav background on mobile devices */
nav {
  background: #00000000;
}

nav a, nav a:visited {
  color: #fff;
  }
/* selected nav link */
nav a.selected, nav a:hover {
  color: #000000;
}

#gallery li {
  position: relative;
  overflow-x: hidden;
}


#gallery img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

#gallery li:hover img {
  transform: scale(1.1) rotate(2deg);
  filter: brightness(1.2) saturate(1.3);
}

#gallery li p {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  transition: bottom 0.4s ease;
}

#gallery li:hover p {
  bottom: 0;
}
header h1 {
  font-size: 24px;
  color: #33333300;
  animation: colorChange 5s infinite alternate;
  border-bottom: #00000000;
}





@keyframes colorChange {
  0% { color: #ff4d6d; }
  50% { color: #4ddfff; }
  100% { color: #7dff4d; }
}
.gallery-link {
  display: inline-block;
  padding: 12px 24px;
  background: #ff4d6d;
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-size: 1.2rem;
  transition: transform 0.2s ease, background 0.3s ease;
}

.gallery-link:hover {
  transform: scale(1.05);
  background: #ff1a47;
}


@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gallery-button {
  display: inline-block;
  padding: 14px 28px;
  margin: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(270deg, #e9e9e9, #8b8b8b, #e8e8e8, #767676);
  background-size: 800% 800%;
  border-radius: 30px; /* starting shape */
  
  /* Animations */
  animation: gradientShift 10s ease infinite, morphShape 0.8s ease-in-out infinite;
  transition: transform 2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gallery-button:hover {
  transform: scale(1.1) rotate(1deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes morphShape {
  0%   { border-radius: 30px; }   /* pill */
  25%  { border-radius: 50px; }   /* more rounded */
  50%  { border-radius: 50%; }    /* circle-ish */
  75%  { border-radius: 15px; }   /* squarer */
  100% { border-radius: 30px; }   /* back to start */
}
html, body {
   /* your existing styles */
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* 🔥 Fixed background image */
  background-image: url('https://res.cloudinary.com/dibw4hgvj/image/upload/v1758398764/Untitled_Artwork_3_f0klte.png'); /* replace with your image path */
  background-size: cover;           /* makes image cover entire viewport */
  background-position: center;      /* centers the image */
  background-repeat: no-repeat;     /* prevents tiling */
  background-attachment: fixed;     /* keeps image fixed relative to viewport */
}
.greymode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
    background: 
    url("https://res.cloudinary.com/dibw4hgvj/image/upload/v1758400866/Untitled_Artwork_2_wvc8ko.png") no-repeat center center fixed;
  background-size: cover;
  z-index: 0;

}
.rainbowmode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
    background: 
    url("https://res.cloudinary.com/dibw4hgvj/image/upload/v1758400866/Untitled_Artwork_2_wvc8ko.png") no-repeat center center fixed;
  background-size: cover;
z-index: 0;
}
.sunsetmode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
    background: 
    url("https://res.cloudinary.com/dibw4hgvj/image/upload/v1758400866/Untitled_Artwork_2_wvc8ko.png") no-repeat center center fixed;
  background-size: cover;
z-index: 0;
}
/* 📱 Mobile override */
@media (max-width: 768px) {
  html, body {
    background-attachment: scroll;  /* avoids mobile bugs */
    background-size: 1500px;       /* scale without cropping */
    background-position: top center; /* align nicely */
    background-repeat: repeat-y;
  }
}

@media (max-width: 768px) {
  .sunsetmode::before {
    background-attachment: scroll;  /* avoids mobile bugs */
    background-size: 1500px;       /* scale without cropping */
    background-position: top center; /* align nicely */
    background-repeat: repeat-y;
  }
}

@media (max-width: 768px) {
  .greymode::before {
    background-attachment: scroll;  /* avoids mobile bugs */
    background-size: 1500px;       /* scale without cropping */
    background-position: top center; /* align nicely */
    background-repeat: repeat-y;
  }
}

@media (max-width: 768px) {
  .rainbowmode::before {
    background-attachment: scroll;  /* avoids mobile bugs */
    background-size: 1500px;       /* scale without cropping */
    background-position: top center; /* align nicely */
    background-repeat: repeat-y;
  }
}


/* GREY MODE — force a full-page gradient that fills and stays visible */
html.greymode,
body.greymode {
  background: linear-gradient(270deg, #3c3c3c, #ffffff, #828282);
  background-size: 400% 400%;   /* make it big so movement is visible */
  animation: gradientShift 15s ease infinite;
  color: #111 !important;
  
}

/* Animation keyframes */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Make large wrappers transparent so the root background shows through */
html.greymode #gifSplash,
html.greymode .splash,
html.greymode #wrapper,
html.greymode .content,
html.greymode header,
html.greymode main,
html.greymode footer {
  background: transparent !important;
}

/* Fallback: if an element still paints a big opaque background, use this low-level override */
html.greymode * {
  background-color: transparent !important;
  background-image: none !important;
}

.button-container {
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  flex-direction: row;      /* side by side (use column for stacked) */
  gap: 20px;                /* spacing between buttons */
  height: 100vh;            /* full screen height */
  width: 100%;              /* full screen width */
  text-align: center;       /* safety */
  background: transparent;         /* temporary background to see container */
}

.gallery-button {
  display: inline-block;
  width: 220px;          /* equal width */
  height: 60px;          /* equal height */
  line-height: 60px;     /* vertically centers text */
  text-align: center;
  
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  cursor: pointer;

  background: linear-gradient(270deg, #f0f0f0, #868686, #e8e8e8, #707070);
  background-size: 800% 800%;
  border-radius: 30px;

  animation: gradientShift 6s ease infinite, morphShape 8s ease-in-out infinite;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gallery-button:hover {
  transform: scale(1.1) rotate(1deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes morphShape {
  0%   { border-radius: 30px; }
  25%  { border-radius: 50px; }
  50%  { border-radius: 50%; }
  75%  { border-radius: 15px; }
  100% { border-radius: 30px; }
}

.button-container { 
   background-color: rgba(0, 0, 0, 0.0); 

}
.profile-photo {

  border-color: #00000000;
}

.greeting {
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 3rem; /* adjust size */
  margin-top: 20px;
  color: #000;
}

img {
  border-color: #00000000;
}

/* GALLERY CONTAINER */
#gallery {
  display: grid;
  grid-template-columns: repeat(fill, minmax(280px, 1fr)); /* flexible grid */
  gap: 20px;
  list-style: none;
  margin: 40px auto;
  padding: 20px;
  max-width: 1400px;
  justify-items: center; /* center images */
}

/* GALLERY ITEM */
#gallery li {
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 4px; /* gives images breathing space */
  size: 5000px;
}

#gallery li:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* IMAGES (FULLY VISIBLE, NO CROPPING) */
#gallery img {
  width: 100%;
  height: auto;          /* keeps proportions */
  object-fit: contain;   /* ensures no cropping */
  display: block;
  border-radius: 1px;
}

/* OPTIONAL CAPTIONS */
#gallery li p {
  text-align: center;
  margin-top: 10px;
  font-size: 0.95rem;
  color: #333;
}

nav a, nav a:visited {
  color: #000000;
}
 
p {
  color: #000;

  text-align: center;
}
@keyframes fadeOut {
  0%   { opacity: 1; visibility: visible; pointer-events: auto; }
  99%  { opacity: 1; }
  100% { opacity: 1; visibility: visible; pointer-events: none; }
}
a {
  text-align: center;
}

.year-list {
  list-style: none;       /* removes bullets */
  padding: 0;
  margin: 20px 0;
  text-align: center;     /* centers the items */
}

.year-list li {
  display: inline-block;  /* makes items sit side by side */
  margin: 0 15px;         /* spacing between years */
}

.year-list a {
  text-decoration: none;
  font-size: 1.5em;
}

.year-list a {
  text-decoration: none;
  font-size: 1.5em;
  color: #333;                  /* normal text color */
  transition: all 0.3s ease;    /* smooth animation */
}

.year-list a:hover {
  color: #e63946;               /* new color on hover */
  transform: scale(1.2);        /* grow slightly */
}

.year-list a {
  font-size: 2.5rem; /* makes "2025" much larger */
  font-weight: bold;
}
.art-image img {
  max-width: 32%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 0;
}

  .art-image2 img {
  max-width: 32%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 0;

  /* Move it up and right */
  margin-top: -149px;   /* negative value moves it upward */
  margin-left: 120px;  }

  .year-list a {
  font-size: 5rem;            /* make it HUGE */
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  animation: rainbow 4s linear infinite; /* colorful animation */
}

/* Rainbow color animation */
@keyframes rainbow {
  0%   { color: #ff3366; }   /* hot pink */
  20%  { color: #ffcc00; }   /* yellow */
  40%  { color: #33cc33; }   /* green */
  60%  { color: #00b4d8; }   /* aqua blue */
  80%  { color: #6633ff; }   /* purple */
  100% { color: #ff3366; }   /* back to pink */
}

/* Animated ellipses after "psst scroll down" */
.dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
.art-image {
  display: flex;
  justify-content: flex-end; /* pushes image to the right */
  margin: 20px 172px;
}
.art-image img {
  max-width: 400px; /* keeps it from being too big */
  height: auto;
}

.art-image img {
  max-width: 400px;
  height: auto;
  margin-top: -164px; /* move image up */
}

.art-image2 img {
  max-width: 400px;
  height: auto;
  margin-top: -200px; /* move image up */
}
.year-list {
  list-style: none;
  padding: 0;
}

.year-list li {
  display: flex;
  align-items: center;
  gap: 8px; /* space between text and icon */
}

.year-icon {
  width: 80px;   /* smaller size */
  height: auto;
  animation: bounceToward 3s ease-out infinite;
  position: static;
}

@keyframes bounceToward {
  0% {
    transform: translateX(10px) translateY(0) scale(1.1);
    opacity: 1;
  }
  30% {
    transform: translateX(50px) translateY(0px) scale(1.1);
    opacity: 1;
  }


  60% {
    transform: translateX(10px) translateY(0px) scale(1.1);
  }

  
  80% {
    transform: translateX(50px) translateY(0px) scale(1.1);
  }
  100% {
    transform: translateX(10px) translateY(0) scale(1.1);
    opacity: 1;
  }
}
.year-list {
list-style: none;
  padding: 0;
  margin-left: 40%; /* adjust this number */
}

 .fanart-header {
    text-align: center
 }

.fanart-title {
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin: 40px auto;
  display: inline-block;  
  
 

  /* Gradient text */
  background: linear-gradient(90deg, #4d4d4d, #ebebeb, #4e4e4e, #e1e1e1, #5f5f5f);
  background-size: 400% 400%;
  
  -webkit-text-fill-color: transparent;

  /* Glow effect */

  /* Animations */
  animation: gradientShift 4s ease infinite, glowPulse 110s ease-in-out infinite;
}

/* Animate gradient flow */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animate glow pulsing */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 
      0 0 0px rgba(0, 0, 0, 0.9),
      0 0 0px rgba(0, 0, 0, 0.7),
      0 0 0px rgba(0, 0, 0, 0.6);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(255,255,255,1),
      0 0 40px rgba(255,0,128,0.9),
      0 0 60px rgba(0,200,255,0.9);
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
   overflow-x: hidden;
  overflow-y: auto;    /* allow vertical scroll */
}

main {
  flex: 1; /* grows to take up space */
}


.greeting{
  margin-top: -70px;
}

.scroll {
  font-size: 36px;     /* bigger text */
  font-weight: bold;   /* makes it bolder */
  text-align: center;  /* keep it centered */
  margin-top: 20px;    /* add space if needed */
}

.greeting {
  font-size: 3em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin-top: -98px;
  background: linear-gradient(
    120deg,
    #d4d4d4 0%,
    #ffffff 20%,
    #a6a6a6 40%,
    #f0f0f0 60%,
    #7a7a7a 80%,
    #d4d4d4 100%
  );
  background-size: 200% auto; /* makes gradient longer so it can move */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
  letter-spacing: 2px;
}

/* Metallic shine animation */
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* --- Splash --- */
.splash img {
  width: 50vw;       /* scales with screen width */
  max-width: 220px;  /* never bigger than 220px */
  height: auto;
  
  
}


/* Extra small phones */
@media (max-width: 400px) {
  .splash img {
    width: 60vw;      /* a bit smaller on tiny screens */
    max-width: 180px;
  }
}
@media (max-width: 768px) {
  .greeting {
    display: none;
  }
}

/* phones & small screens */
@media (max-width: 768px) {
  body {
    font-size: 14px;  /* smaller text */
  }

  h1 {
    font-size: 1.5rem; /* shrink headings */
  }

  h3 {
    font-size: 14px;
  }

  p {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .art-image img {
    margin-right: -100px;
    margin-top: -55px;
  }
}

@media (max-width: 768px) {
  .art-image2 img {
    margin-left: -1px;
    margin-top: -60px;
  }
}

.h1-icon {
  width: 36px;   /* smaller size */
  height: auto;  /* keeps proportions */
  border-color: #00000000;
}

/* 📱 Mobile styles */
@media (max-width: 100px) {
  #gallery img {
    width: 10%;       /* nearly full width on mobile */
    max-width: 400px; /* optional cap */
    display: block;
    margin: 10px auto;
    
  }
}
/* 📱 Mobile only (max 600px wide) */
@media (max-width: 600px) {
  .fanart-title {
    font-size: 1.8rem; /* smaller text */
  }

  .fanart-header {
    padding: 20px 10px; /* less padding */
    
  }
}

@media (max-width: 600px) {
  body {
    overflow-x: hidden !important;
  }
}
#creepo4 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center */
  width: auto;
  height: auto;
  max-width: none;
}


#psa {
  text-align: center;       /* centers inline text like <p> */
  margin: 20px 0;           /* optional spacing */
  margin-left: 0px;
}



/* Center gallery on all devices */
#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centers horizontally */
  gap: 20px;                 /* spacing between items */
  padding: 0;
  margin: 20px auto;
 
  list-style: none;
}

#gallery li {
  float: none !important;    /* kill old float */
  flex: 0 1 300px;           /* each item max ~300px */
  text-align: center;
}

#gallery li img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center items */
  gap: 20px;
  padding: 0;
  margin: 20px auto;
 
  list-style: none;
}

/* Gallery item */
#gallery li {
  flex: 0 1 300px;       /* flexible, max 300px each */
  text-align: center;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;      /* clip image overflow */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Gallery image */
#gallery li img {
  width: 100%;           /* fills container */
  height: 100%;          /* takes full height */
  object-fit: contain;   /* fits without cropping */
  display: block;
}/* 📱 Mobile-only gallery alignment fix */
@media (max-width: 768px) {
  #gallery {
    display: flex;
    flex-direction: column;   /* stack items vertically */
    align-items: center;      /* center items horizontally */
    padding: 0;
    margin: 0 auto;           /* centers container itself */
  }

  #gallery li {
    width: 90%;               /* responsive width */
    margin: 0 auto 20px;      /* centers each item */
    text-align: center;
    margin-left: 50px;
  }

  #gallery img {
    max-width: 100%;          /* scale properly */
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #gallery p {
    margin-top: 8px;
    font-size: 14px;
  }
}/* 📱 Mobile-only: force gallery centered */
@media (max-width: 768px) {
  #wrapper {
    margin: 0 auto !important;   /* stop right offset */
    padding: 0 10px !important;  /* small padding */
  }
    #wrapper2 {
    margin: 0 auto !important;   /* stop right offset */
    padding: 0 10px !important;  /* small padding */
  }

  #gallery {
    display: flex !important;
    flex-direction: column !important; /* stack vertically */
    align-items: center !important;    /* center horizontally */
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #gallery li {
    width: 90% !important;       /* responsive width */
    margin: 10px auto !important; /* center each item */
    float: none !important;       /* kill floats */
  }

  #gallery img {
    display: block !important;
    margin: 0 auto !important;   /* centers image */
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  #gallery {
    transform: translateX(0px); /* move left */
    /* transform: translateX(10px);  move right */
  }
}
/* 📱 Mobile only */
@media (max-width: 768px) {
  .scroll, 
  #psa {
    text-align: center;      /* center text horizontally */
    margin: 0 auto;          /* center block if it has a width */
    display: block;          /* make sure it behaves as block */
    width: 100%;             /* span the screen */
  }
}
/* Make year-list ALWAYS clickable */
.year-list {
  position: relative;
  z-index: 9999; /* very high priority */
  pointer-events: auto; /* ensure it can always be clicked */
}

.year-list a {
  position: relative;
  z-index: 10000; /* each link stays on top */
  pointer-events: auto;
}

.fish {
  z-index: 1;           /* keep them behind */
  pointer-events: none; /* they never block clicks */
}
/* Move year-list left only on mobile */
@media (max-width: 768px) {
  .year-list {
    position: relative;
    left: -100px; /* adjust this value to move more/less */
  }
}

.fish {
  position: fixed;
  bottom: -100px; /* start below screen */
  width: 80px;
  pointer-events: none;
  animation: swimUp linear forwards;
  border-color: #4dabf700;
  z-index: 9999; /* 👈 ensure fish float above everything */
}
/* Wrapper stays centered */
#wrapper {
  max-width: 960px;        /* keeps content from stretching too wide */
  margin: 0 auto;          /* centers horizontally */
  padding: 20px;           /* breathing room */
  box-sizing: border-box;  /* keeps padding inside width */
  text-align: center;      /* centers text and inline elements */
}

/* Sections default to block stacking */
#wrapper section {
  margin-bottom: 20px;
}

/* Desktop: place sections side by side */
@media (min-width: 768px) {
  #wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* space between sections */
    text-align: left; /* better readability on desktop */
  }

  #wrapper section {
    flex: 1;
    max-width: 400px;
  }
}
.year-list {
  display: flex;
  justify-content: center;  /* centers horizontally */
  list-style: none;         /* remove default bullets */
  padding: 0;
  margin: 20px auto;        /* auto margins help centering */
}

.year-list li {
  display: flex;
  align-items: center;
  gap: 8px; /* space between text and icon */
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .year-list {
    justify-content: center;   /* still centered */
    margin-top: 10px;          /* nudge down */
    margin-left: 113px;
  }

  .year-list li {
    font-size: 1.2rem;         /* slightly smaller text on mobile */
  }

  .year-icon {
    width: 20px;               /* shrink the icon */
    height: auto;
  }
}
@media (max-width: 768px) {
  .year-icon {
    width: 100px;  /* keep it locked */
    height: auto;
       margin-left: -20px;            /* nudge it */
  }
}
.profile-photo{
  padding-top: 100px;
  
}
#wrapper2 {
   margin-top: -60px;
}
/* 🎨 Animated silver gradient border */
.silver-border {
  border: 4px solid transparent; 
  border-radius: 12px; /* optional rounded corners */
  padding: 20px;

  /* Gradient border trick */
  border-image: linear-gradient(
    90deg,
    #c0c0c0,
    #f5f5f5,
    #a9a9a9,
    #c0c0c0
  ) 1;

  animation: borderShift 100s ease-out infinite;
}

/* 🌈 Animate the gradient */
@keyframes borderShift {
  0% {
    border-image: linear-gradient(
      90deg,
      #c0c0c0,
      #f5f5f5,
      #a9a9a9,
      #c0c0c0
    ) 1;
  }
  50% {
    border-image: linear-gradient(
      270deg,
      #c0c0c0,
      #f5f5f5,
      #a9a9a9,
      #c0c0c0
    ) 1;
  }
  100% {
    border-image: linear-gradient(
      90deg,
      #c0c0c0,
      #f5f5f5,
      #a9a9a9,
      #c0c0c0
    ) 1;
  }
}
@keyframes fadeInPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
  60% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.splash.hide {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.splash {
  pointer-events: none;
}
.splash img {
  width: 277px;
  height: auto;
  animation: popIn .32s ease forwards; /* keep final state */
  pointer-events: auto; /* clickable if needed */
}
.splash {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  pointer-events: none; /* allow taps to pass through */
}

.splash img {
  width: 277px;
  height: auto;
  animation: popIn 0.6s ease forwards;
  margin-bottom: 129px;

  pointer-events: none; /* not clickable, only decorative */
}
@media (max-width: 768px) {
  .button-container {
    margin-top: -70px;  /* move buttons up */
  }
}

nav {
  word-spacing: 90px;
}
body {
  margin: 0;
  height: 100vh;
  overflow-y: scroll;   /* keeps scrolling enabled */
  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
#fish-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* prevents blocking taps */
  z-index: 0; /* keep it behind nav and buttons */
}
nav, .year-list, .gallery-button {
  position: relative;
  z-index: 10; /* higher than fish */
}
.overlay {
  pointer-events: none;
}

/* Bigger target on small screens */
@media (max-width: 480px) {
  #scrollToEnd {
    padding: 14px 18px;
    font-size: 16px;
    bottom: 14px;
    right: 12px;
  }
}
/* button always tappable and easy to hit on phones */
#scrollToEnd {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 999999;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.12);
}

/* fish/overlay must never capture taps */
.fish,
#fish-container,
.splash,
.overlay {
  pointer-events: none !important;
}

/* larger tap target for small screens */
@media (max-width: 480px) {
  #scrollToEnd { padding: 14px 18px; font-size: 16px; bottom: 12px; right: 12px; }
}
.about-pic {
position: fixed;
bottom: 0;
right: 60px;
width: 500px;
border-radius: 12px;
display: block;
margin: 0;
z-index: 1000;
}

@media (max-width: 768px) {
  .about-pic {
    display: none;
  }
}
.floating-pic {
  position: fixed;          /* use absolute if you want it to scroll with page */
             /* adjust vertical position */
  left: 50%;                /* push it to the center */
  transform: translateX(-50%); /* pull it back by half its width */
  width: 200px;             /* set your size */
  z-index: 9999;            /* stay on top */
  pointer-events: none;     /* optional: allows clicks through */
  top: 470px;
}
@media (max-width: 1024px) {
  #gifSplash img {
    max-width: 300%;   /* shrink slightly */
  }
}

/* Mobile phones */
@media (max-width: 600px) {
  #gifSplash img {
    max-width: 400%;   /* fit better */
    height: auto;
    transform: scale(0.85); /* scale down further */
  }
}
body.greymode {
  
  color: white;
   background-attachment: fixed;  /* keeps gradient spanning full page */
  background-repeat: no-repeat;
  background-size: cover;
  color: white;

}
/* 🌸 Full-page Pastel Rainbow Mode */
html.rainbowmode,
body.rainbowmode {
  height: 100%;               /* full height */
  min-height: 100%;           /* at least viewport */
  margin: 0;
  padding: 0;
  background: linear-gradient(
    270deg,
    #ffb3ba,  /* pastel red/pink */
    #ffdfba,  /* pastel orange */
    #ffffba,  /* pastel yellow */
    #baffc9,  /* pastel green */
    #bae1ff,  /* pastel blue */
    #d5baff,  /* pastel indigo/lavender */
    #ffbafc   /* pastel violet/pink */
  );
  background-size: 1400% 1400%;
  background-attachment: fixed;  /* locks to viewport */
  animation: rainbowBG 20s ease infinite;
  transition: background 0.5s ease;
  overflow-x: hidden;             /* prevents horizontal scroll */
}

/* Animate rainbow gradient */
@keyframes rainbowBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Force all child elements to be transparent so gradient shows through */
html.rainbowmode *,
body.rainbowmode * {
  background: transparent !important;
}

/* 🌸 Rainbow Text Effect */
.rainbow-text {
  background: linear-gradient(
    90deg,
    #ffb3ba,
    #ffdfba,
    #ffffba,
    #baffc9,
    #bae1ff,
    #d5baff,
    #ffbafc
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 8s linear infinite;
  background-size: 400% 100%;
}

@keyframes rainbowText {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Optional: make your main content flexible to fill the page */
body.rainbowmode {
  
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body.sunsetmode {
    background: linear-gradient(to bottom, #1b1b1b, #333333);
}

main {
  flex: 1; /* grows to fill space */
}
.sunsetmode {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #1b1b1b; /* base dark night */
  animation: sunsetPulse 6s ease-in-out infinite;
  transition: background 0.5s ease;
  overflow-x: hidden;
}

@keyframes sunsetPulse {
  0%   { background-color: #1b1b1b; } /* very dark */
  50%  { background-color: #333333; } /* slightly lighter dark grey */
  100% { background-color: #1b1b1b; } /* back to dark */
}

html.sunsetmode *,
body.sunsetmode * {
  background: transparent !important;
}

/* 🧩 Mobile fix: make the Latest Posts container fit the screen */
@media (max-width: 768px) {
  #recentContainer {
    width: 90vw;                /* shrink to fit screen width */
    max-height: 80vh;           /* keep it inside the viewport */
    overflow-y: auto;           /* scroll if content is tall */
    padding: 16px;              /* smaller padding for phones */
    box-sizing: border-box;
  }

  #recentContainer img {
    max-width: 100%;
    height: auto;
  }

  #closeRecent {
    display: block;
    margin: 12px auto 0 auto;   /* center the Close button */
  }
}


.art-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.hidden {
  display: none;
}

#showRecent {
  margin: 20px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 8px;
}
/* --- Sticky square button --- */
.recent-btn {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 60px;       /* medium square */
  height: 60px;
  background: #333;
  color: #fff;
  font-size: 24px;   /* icon size */
  border: none;
  border-radius: 0 12px 12px 0; /* rounded on right side */
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.recent-btn:hover {
  background: #000;
}

/* --- Popup container --- */
#recentContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #ccc;
  padding: 20px;
  z-index: 10000;
  display: none;
  max-width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border-radius: 12px;
}

#recentContainer img {
  max-width: 200px;
  border-radius: 8px;
  margin: 10px;
}

.art-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.hidden {
  display: none;
}


/* --- Mobile adjustment: move button down 200px --- */
@media (max-width: 768px) {
  .recent-btn {
    top: 200px;
    transform: none; /* cancel the vertical centering */
  }
}

body.no-vertical-scroll {
  overflow-y: hidden; /* removes vertical scroll */
  height: 100vh;      /* lock viewport height */
}