.top-right-image {
    position: absolute;
    top: 10px;
    right: 33px;
    width: 0px;
    height: auto;
    z-index: 100;
}

/* =====================
   STAMPS / BLINKIES AREA
===================== */

#stamps {
  width: 100%;
  background: rgba(173, 216, 230, 0.3);
  border: 2px solid #ADD8E6;
  padding: 8px 0;
  margin: 10px auto 0 auto;  /* 👈 tight under main content */
  overflow: hidden;
  position: relative;
}

#stamps2 {
  width: 100%;
  background: rgba(173, 216, 230, 0.3);
  border: 2px solid #ADD8E6;
  padding: 2px 0;
  overflow: hidden;
  position: relative;
}

/* Containers */
.stamps-container,
.stamps2-container {
  display: flex;
  width: 100%;
  gap: 0px;
  animation: scroll-left 20s linear infinite;
}

/* Reverse direction for second row */
.stamps2-container {
  animation-direction: reverse;
}

/* Images */
.stamps-container img,
.stamps2-container img {
  width: 120px;
  height: auto;
  image-rendering: pixelated;
  transition: transform 0.2s ease, filter 0.3s ease;
}

/* Hover: scale up */
.stamps-container img:hover,
.stamps2-container img:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Blur other images in same container when hovering */
.stamps-container:hover img:not(:hover),
.stamps2-container:hover img:not(:hover) {
  filter: blur(3px);
}

/* Pause scrolling when hovering over container */
.stamps-container:hover,
.stamps2-container:hover {
  animation-play-state: paused;
}

/* Keyframes for left scroll */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =====================
   TITLE IMAGE
===================== */

.top-image {
  text-align: center;
  margin-top: 20px;
}

.top-image img {
  max-width: 100%;
  height: auto;
}

/* =====================
   BACKGROUND IMAGE
===================== */

body {
  background-image: url('https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/blue/000021-tile.jpg');
}

/* Main image that changes on hover */
#randomImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: auto;
  cursor: pointer;
  transition: opacity 0.5s ease;
  opacity: 1;
}

/* =====================
   SCROLLBAR
===================== */

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

::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: url(https://i.imgur.com/Qtm9Z60.png);
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  background-image: url(https://i.imgur.com/IGXGYKz.png);
}

::-webkit-scrollbar-button {
  background-color: darkgrey;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC');
}

::-webkit-scrollbar-button:vertical:start {
  background-position: -45px 0;
}

::-webkit-scrollbar-button:vertical:end {
  background-position: 0 0;
}

::-webkit-scrollbar-button:horizontal:start {
  background-position: -15px 0;
}

::-webkit-scrollbar-button:horizontal:end {
  background-position: -30px 0;
}

/* =====================
   BACK BUTTON
===================== */

.back-button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.back-button img {
  width: 100px;
  height: auto;
  image-rendering: pixelated;
}

.back-button:hover img {
  transform: scale(1.1);
}

.back-button.hidden {
  opacity: 0;
  pointer-events: none;
}

/* =====================
   LEFT NAVBAR (FIXED)
===================== */

.left-navbar {
  position: fixed;
  top: 0%;
  transform: translateY(-50%);

  width: 120px;
  padding: 15px;

  z-index: 999;

  /* FLEXBOX FIX */
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* LINKS */
.left-navbar a {
  display: block;
  width: 100%;

  text-decoration: none;
  color: white;

  font-family: monospace;
  font-size: 16px;

  background: rgba(255,255,255,0.15);
  padding: 6px 12px;

  border-radius: 10px;

  transition: 0.2s;
}

/* hover */
.left-navbar a:hover {
  background: rgba(255,255,255,0.35);
  transform: translateX(5px);
}

/* Back Button Styling */
.back-button {
  position: fixed;      
  top: 10px;            
  left: 10px;           
  z-index: 1000;        
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease; /* smooth hide/show */
}

.back-button img {
  width: 100px;         
  height: auto;
  image-rendering: pixelated; 
}

/* Hover effect */
.back-button:hover img {
  transform: scale(1.1); 
}

/* Hidden state */
.back-button.hidden {
  opacity: 0;
  pointer-events: none; /* prevent clicking when hidden */