body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: ;
  position: relative;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://summerinndreamland.neocities.org/img/undefined%20(50).jpg") no-repeat center center/cover;
  font-family: 'Poppins', sans-serif;
}
.center-media { margin:260px; z-index: 2; }
.center-media img { width: 20px; height: auto; animation: float 4s ease-in-out infinite; 
  
}
/* Floating animation */ @keyframes float { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(10px); } }

/* Top-left GIF */
.top-left-gif {
  position: absolute;   /* relative to the page */
  top: 0px;            /* 40px from top */
  left: 0px;           /* 40px from left */
  z-index: 10;
}
/* Top-left GIF */
/* Container that moves both GIF and message together *//////////
/* Container for GIF + message together */
.top-left-container 
{ position: absolute; width:100px; top: 40px; left: 40px; z-index: 10; display: flex; align-items: center; /* vertically align message next to GIF */ gap: 15px; /* space between GIF and message */ animation: float 4s ease-in-out infinite; /* optional floating */ } /* Hello Kitty GIF */ 
.top-left-gif { width: 100px; height: auto; } /* Message box */ 
.top-left-message { top: 0px; background: url(https://summerinndreamland.neocities.org/img/Cute%20Background.jpg) no-repeat center center/cover; padding: 0px 0px; width:140px; height:50px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); color: #fff; font-weight: 500; font-size: 14px; text-align: center; } /* Floating animation for the container */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Floating animation */ @keyframes float { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(10px); } } 
.top-left-message { position: absolute; top: 10px; /* adjust vertical position */ left: 180px; /* adjust horizontal position (next to GIF) */ background: url(https://summerinndreamland.neocities.org/img/Cute%20Background.jpg) no-repeat center center/cover; padding: 10px 0px; border-radius: 15px; /* rounded corners */ box-shadow: 0 4px 12px rgba(0,0,0,0.1); color: #fff; font-weight: 500; font-size: 14px; text-align: center; z-index: 11; }
/* Container that moves both GIF and message together */
.top-left-container {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 10;
  display: "flex";
  align-items: center; /* vertically centers the items */
  justify-content: flex-start; /* aligns items to the start horizontally */
  gap: 0
  animation: float 4s ease-in-out infinite; /* optional floating */
}

/* Hello Kitty GIF */
.top-left-gif {
  width: 120px;
  height: auto;
}

/* Message box */
.top-left-message {
  background: url(https://summerinndreamland.neocities.org/img/Cute%20Background.jpg) no-repeat center center/cover;
  padding: 10px 15px;
  border-radius: 15px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

/* Floating animation for the container */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}