.top-right-image {
    position: absolute;  /* removes it from document flow */
    top: 10px;           /* distance from top */
    right: 33px;         /* distance from right */
    width: 0px;         /* smaller size */
    height: auto;        /* maintain aspect ratio */
    z-index: 100;        /* above other elements */
}

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

#stamps {
  width: 100%;
  background: rgba(173, 216, 230, 0.3); /* light blue */
  border: 2px solid #ADD8E6; /* blue border */
  text-align: center;
  padding: 8px 0;
  overflow: hidden;
  position: relative;
  margin-top: 500px; /* space above */
  overflow-x: hidden; /* hide horizontal scrollbar */
}

#stamps2 {
  width: 100%;
  background: rgba(173, 216, 230, 0.3); /* light blue */
  border: 2px solid #ADD8E6; /* blue border */
  text-align: center;
  padding: 8px 0;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  overflow-x: hidden; /* hide horizontal scrollbar */
}

/* Containers */
.stamps-container, .stamps2-container {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: scroll-left 20s linear infinite; /* default scroll */
}

/* 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; /* include filter for blur */
}

/* 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); /* subtle shadow to pop */
}

/* 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%); } /* scroll half container width for seamless loop */
}

/* =====================
   title image
===================== */
.top-image {
  text-align: center;  /* centers inline elements inside this div */
  margin-top: 20px;    /* distance from top of page */
}

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


/* =====================
   backgrouns 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; /* smooth fade */
         opacity: 1;
      }
      





::-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 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 */
}