/* 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." */

@font-face {                  
  font-family: 'DepartureMono';
  src: url(https://gillbot7000.neocities.org/DepartureMono.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;   /* helps text appear faster while font loads */
}

body {
  background-color: #0b080e;                    /* fallback dark color if image fails */
  background-image: url('https://gillbot7000.neocities.org/Image%20Data/scrolling.webp');  /* ← your tiling image here */
  background-repeat: repeat;                 /* tiles in all directions */
  background-position: center top;           /* optional: fine-tune starting point */
  margin: 0;                                 /* important: no extra space */
  min-height: 100vh;                         /* full height */
  font-family: 'DepartureMono', sans-serif;   /* ← quotes around name + fallback */
  color: #ababab;          /* ← Restore your light gray text here as fallback */
  image-rendering: pixelated;
}

/* Normal (unvisited) links */
a {
  color: #c9a0ff;          /* light purple - nice contrast on your dark bg */
  text-decoration: none;   /* removes the default underline - optional but cleaner */
}

/* Visited links (after you've clicked them) */
a:visited {
  color: #9b7fd9;          /* slightly darker purple so you know it's been visited */
}

/* When you hover over a link with your mouse */
a:hover {
  color: #ff99cc;          /* pinkish for that devilish vibe */
  text-decoration: underline;  /* bring back underline on hover - optional */
}

/* The instant you click the link */
a:active {
  color: #ff6699;          /* bright for feedback */
}

.container {
  background-color: #1e1725;                 /* your dark purple */
  max-width: 800px;                          /* or whatever width you like – 600–900px common */
  margin: 0 auto;                            /* centers it */
  min-height: 100vh;                         /* optional: makes it full height if content is short */
  padding: 2em 1em;                          /* breathing room inside */
  box-sizing: border-box;                    /* keeps padding inside width */
  box-shadow: 0 0 40px rgba(0,0,0,0.6);      /* dark glow around edges */
  border-left: 2px solid #3a2f45;            /* faint left border */
  border-right: 2px solid #3a2f45;           /* faint right border */
  text-align: center;        /* Centers text inside the container */
}


ul {
  list-style-position: inside;   /* ← This is the key line! Moves bullet inside the text flow */
  padding-left: 0;               /* Removes default left padding so it's truly centered */
  margin: 1em auto;              /* Optional: centers the whole list block + adds vertical space */
}

/* General images: stack vertically, centered, with space */
img {
  display: block;
  margin: 1.0em auto;      /* decent vertical spacing between stacked ones */
  max-width: 80%;          /* prevents overflow, adjust if needed */
}

/* Override for the bottom row only */
.bottom-row {
  display: flex;                /* horizontal layout */
  justify-content: center;      /* centers the group */
  align-items: center;          /* vertical alignment if heights differ */
  gap: 1.3em;                   /* space between the three images – tweak this! */
  margin: 2em auto 0em auto;    /* extra top/bottom space for the row */
  flex-wrap: wrap;              /* if screen is tiny, they stack instead of squishing */
}

/* Make bottom images smaller if they look too big side-by-side */
.bottom-row img {
  display: inline-block;     /* needed inside flex */
  margin: 0;                 /* reset the general margin */
  width: auto;               /* keeps aspect ratio */
  height: auto;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2em;
  margin: 1.2em 0 1.2em 0;       /* controls space above/below the buttons */
  flex-wrap: wrap;
}

.nav-btn {
  font-size: 1.25em;
  font-weight: bold;
  color: #c9a0ff;
  background-color: #2a1f35;
  padding: 0.45em 1.0em;
  border: 2px solid #ababab;
  text-decoration: none;
  border-radius: 0px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-btn:hover {
  transform: scale(1.08);
  background-color: #3a2f45;
  border-color: #ff99cc;
  color: #ffffff;
  box-shadow: 0 0 12px #c9a0ff;
}

/* Remove most of the gap between nav buttons and the accent image below them */
.nav-buttons + img {
  margin-top: 0.8em;     /* Change this number: 0.3em = very tight, 0.6em = moderate, 0 = touching */
}

@keyframes gentle-jiggle {
  0%, 100% { 
    transform: translate(0, 0) rotate(-1deg); 
  }
  50% { 
    transform: translate(1px, -1.5px) rotate(1deg); 
  }
}

.jiggle-title {
  display: inline-block;
  animation: gentle-jiggle 3.2s ease-in-out infinite;
  transform-origin: center;
  font-size: 1.6em;                    /* bigger */
  letter-spacing: 2px;                 /* pixel feel */
text-shadow: 
  -2px -2px 0 #000,
  2px -2px 0 #000,
  -2px 2px 0 #000,
  2px 2px 0 #000;
}

/* New class for the row of 3 images */
.image-row {
  display: flex;
  justify-content: center;      /* centers the group */
  align-items: center;          /* vertical alignment if heights differ */
  gap: 0em;                     /* space between images */
  margin: 1em auto;             /* vertical spacing around the row */
  flex-wrap: wrap;              /* stack on small screens if needed */
}

/* Make side images smaller */
.small-side-gif {
  max-width: 150px;             /* adjust this number for size (e.g., 100px, 150px) */
  height: auto;
}