@font-face { font-family: starborn; src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);}
@font-face { font-family: 'Magica'; src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);}
@font-face { font-family: kawaii stitch; src: url(https://dl.dropbox.com/s/yjal3we9j6biyn5/Kawaii%20Stitch.ttf);}
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

* {
  box-sizing: border-box;
}

:root{
  --border: #76c4e5;
  --vbg: #76c4e5;
  --bg: #a3d8f4;
  --lbg: #d0f1ff;
  --text: #333333;
  --Highlight: #62cff4;
  --bgd: #89f7ff;
}

body {
font-family: 'Press Start 2P', monospace;
/*image-rendering: pixelated;*/
text-align: center;
background-image: url('bg2.png');
background-attachment: fixed;
background-repeat: repeat;   
background-position: center; 
overflow-x: hidden;
margin: 0;
/*margin-top: 20px;*/
padding: 0;
width: 100%;
color: #333333;
}

  /* hide scroll */
html {
overflow: scroll;
overflow-x: hidden;
width: 100%;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}

::selection {
  background: white;  /* background color when text is selected */
  color: #76c4e5;         /* text color when selected */
}

a {
  text-decoration: none;
  color: black;
}

.landing{
  width: 1046px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  border: 13px solid;
  border-radius: 10px;
  border-image: url(blue_border.png) 7 round;
}

.header{
  color: var(--Highlight);
  position: relative;
  background-color: var(--bg);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 1020px;                 /* fixed width */
  height: 190px;
  overflow: hidden;     /* makes sure overlay doesn’t spill outside */
  padding-top: 40px; /* extra top padding so text doesn't overlap overlay */
  /*border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
  z-index: 10;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.header::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 57px; /* adjust to your tile image height */
  background: url("028-b.gif") repeat-x top center;
  pointer-events: none; /* makes it ignore clicks */
}

.header::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 57px;
  background: url("032-b.gif") repeat-x bottom center;
  pointer-events: none;
}

.marqueebox {
  background:var(--bg);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow: hidden;
  margin: 0 auto 0 auto;  /*top, auto left/right, bottom */
  width: 1020px;
  height: 15px;
}

.marquee {
  align-content: center;
  width: 1020px;
  display: inline-block;
  white-space: nowrap; /* prevents wrapping */
  animation: mmove 20s linear infinite;
}

@keyframes mmove {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

.marqueegif {
  height: 15px;   /* resize GIF */
  width: auto;    /* keep aspect ratio */
}


.titlegif {
  width: 90px;     /* adjust size */
  height: auto;
  vertical-align: middle; /* keeps it aligned with text */
  display: inline-block;    /* forces it to stay on the same line */
  margin-right: -30px;           /* space left & right */
  margin-top: -10px;
  filter: grayscale(0%);
  transition: .25s ease-out;
}

.titlegif:hover{
  filter: grayscale(100%);
  transition: .25s ease-in;
}

/* =================== Header-Title =================== */
#bubble{
  font-family: starborn;
  font-size: 32px;
  -webkit-text-stroke: .1px #fff;
  margin-top: 15px;
  /*margin-right: 60px;*/
  display: inline-block; /* ensures margin works on inline elements */
}

.main{
box-sizing: border-box; /* Include padding in width calculation */
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
/*border-left: 14px solid transparent;
border-image: url(bodyborder.gif) 10 round;*/
background:#d0f1ff;
background-image: url('dotbg.gif');
background-attachment: fixed;
background-repeat: repeat;
margin: auto;
margin-top: 0px;
width: 1020px;
height: 650px;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 15;
}

.smokegirl {
  position: absolute;
  top: -75px;
  left: -20px;
  height: 30%;   /* control size manually */
  image-rendering: pixelated; /* keeps sharp pixel art look */
  /*pointer-events: none;      so clicks pass through */
  z-index: 20;
}

.smokegirl:hover{
 filter: drop-shadow(1px 1px 1px black) 
          /*drop-shadow(0 0 4px #76c4e5) 
          drop-shadow(0 0 8px #fff);*/
}

.whitecloudybox {
transform: translateX(20px); /* small inward shift */
height: 550px;
width: 640px;
box-sizing: border-box;
border: 10px solid transparent;
border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
}

.whitecloudyfull {
box-sizing: border-box;
width:100%;
height:100%;
background:#fff;
color:black;
padding: 15px;
}

.introduction {
  font-family: "Dokdo", system-ui;
  color: var(--vbg);
  text-align: center;
  font-size: 1rem;
  margin: 0;
}

.aboutwebsite{
 font-size: 2rem;
}

.intro-gif{
  vertical-align: text-top;
}

/* =================== Highlight-Words =================== */
gg {
  font-family: 'Frighted', sans-serif; /* custom font (you’d need to load it) */
  font-size: 1.5em;
 
  /* Gradient applied to the text */
  background: linear-gradient(180deg, #62cff4, #2c67f2);
 
  background-clip: text;   /* makes background apply to text */
  -webkit-text-fill-color: transparent; /* hides normal text color so gradient shows */
 
  text-align: center;
}

.btwn-gif{
 width: 300px; 
}

.scrollbox{
  overflow-y:auto;
  height: 440px;
}

/* =================== Left_Side =================== */

.left-wrapper {
  position: absolute;
  left: -130px;          /* offset wrapper to left of main */
  top: 10px;
  text-align: center;
  width: 150px;
  transform: translateX(0); /* Ensure no unintended translation */
}

/* =================== PFP-Log =================== */
/* Profile picture box */
.left-box.top {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;   /* stack text above image */
  background: var(--lbg);
  margin-bottom: 10px;   /* spacing before bottom box */
  cursor: pointer;
}

.pfplabel {
  height: 4px;
  z-index: 20;
}

.navlabel {
  border-image: url("divnav.gif") 14 round;
  border-bottom: 5px solid var(--border);
  padding: 0;
  font-family: 'Magica';
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;

  /* Gradient text effect */
 background: repeating-linear-gradient(
  -45deg,
  red 0%,
  orange 16%,
  yellow 32%,
  green 48%,
  blue 64%,
  indigo 80%,
  violet 100%
  );

  background-size: 200% 200%; 
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 

  animation: slide 8s linear infinite;
}

/* Keyframes for sliding gradient */
@keyframes slide {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Profile image inside */
.pfp-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-width: 10px;
  border-style: solid;
  image-rendering: pixelated; /* if you want crisp pixel art */
  border-image: url("blue_border.png") 8 fill round;
}

/* =================== Navigation-Bar =================== */
.left-box.bottom {
  /*box-shadow: 0 0 5px rgba(118, 196, 229, 0.5);
  box-shadow: inset 10px 0px 6px -10px #CCC, inset -10px 0px 6px -10px #CCC, inset 0px 10px 6px -10px #FFF, inset 0px -10px 6px -10px #CCC;
  */
  background: var(--lbg);

  /*background-image: url(https://i3.glitter-graphics.org/pub/1420/1420183akui2vb069.gif);*/
  border-radius: 6px;
  border: 1px solid var(--border);
  /*max-height: 0;*/ /* Initially hidden */
  overflow: hidden; /* Hide content when collapsed */
  transition: max-height 0.3s ease-out; /* Smooth dropdown animation */
}
  /* Class to show the dropdown */
/*.left-box.bottom.active {
  height: auto;
  max-height: 400px;
}*/

/* Navigation links styling */
.nav-links {
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin: 0;
  width: 100%;
  transition: .2s ease; 
  font-size:2em;
}

.nav-links li:hover {
  /*background: linear-gradient(
    to top,
    rgba(118, 196, 229, 0.3) 0%,
    rgba(0, 0, 255, 0) 20%,   
    rgba(255, 0, 0, 0) 100% 
  );*/
transform: scale(110%);
background: content-box radial-gradient(white 0%, transparent 70%);
}

.nav-links li {
  padding: 8px;
  border-image: url("divnav.gif") 14 round;
  border-bottom: 8px solid var(--border);/* Subtle separator */
}

.nav-links li:last-child {
  margin-bottom: 10px;
  border-bottom: none; /* No border on the last item */
}

.nav-links a {
  color: var(--text); /* Dark blue text for contrast */
  text-decoration: none;
  font-family: 'Magica';
  font-size: 1.2rem;
  font-weight: bold;
  display: block; /* Full width for each link */
  transition: color 0.2s ease; /* Smooth hover transition */
}

.nav-links a:hover {
  color: var(--border); /* White on hover for visibility */
}

.nav-links img {
  opacity: 0;               /* hide by default */
  transition: opacity 0.1s; /* smooth fade in/out */
  height: 16px;
}

.nav-links a:hover img {
  opacity: 1;               /* show on hover */
}

#invert{
  transform: scaleX(-1);
}

/* =================right-side ================ */
.rightfloat {
  position: absolute;
  right: -260px;          /* offset wrapper to left of main */
  top: 10px;
  text-align: center;
  width: 280px;
  transform: translateX(0); /* Ensure no unintended translation */
}

/* ============ Chatbox ============= */
.chatbox {
  height: 400px; /* Adjustable height */
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 5px rgba(118, 196, 229, 0.5);
  margin-top: 15px; /* Space from update box */
}

.chat-title {
  font-size: 1.2rem;
  color: var(--vbg);
  margin-bottom: 5px;
  font-family: 'Magica';
}

/* =================== Right-boxes =================== */
.rightcontent {
  position: absolute;
  top: 60px;        /* start point */
  right: 0;          /* anchor to the right */
  width: 300px;      /* all boxes share this width */
  transform: translateX(-30px); /* small inward shift */
  display: flex;
  flex-direction: column;
  gap: 15px;         /* spacing between stacked boxes */
}

/* =================== Update-Box =================== */
.updatetitle{
  margin: 10px;
  font-size: 2rem;
}

.updatelog {
border-width:7px;
border-style:solid;
border-image: url("https://foollovers.com/mat/baf/flower/fl32-005-d.gif") 7 fill round;
box-sizing: border-box;
border-radius: 6px;
height: 300px;
overflow: auto;
background: white;
font-family: 'Magica';
display: flex;
flex-direction: column;
align-items: center;
}

.scroll-box {
  flex: 1;                  /* take remaining space */
  width: 100%;              /* fit inside */
  color: black;
  padding-top: 0px;
  padding: 8px;
  overflow-y: auto;         /* enables scroll if content is too tall */
}

.update-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 5px;
  background: var(--lbg);
  border-radius: 4px;
  transition: background 0.3s, transform 0.2s;
}

.update-entry:hover {
  background: var(--Highlight);
  color: white;
  transform: scale(1.02);
}

.update-entry.new {
  background: var(--Highlight);
  color: white;
  animation: newUpdate 2s ease-out;
}

.update-date {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text);
}

.update-icon {
  vertical-align: middle;
  image-rendering: pixelated;
}

/* Animation for new updates */
@keyframes newUpdate {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.stampbox{
  background-image: url(https://i4.glitter-graphics.org/pub/1411/1411314k1qx2mp4vf.jpg);
  /*background: #ffffffcc;*/
  border: 1px solid rgb(255, 255, 255, .5);
  outline: 1px solid var(--border);
  border-radius: 12px;
  width: 300px;
  text-align: center;
  font-family: 'Magica', sans-serif;
}

.stampbox h2 {
  margin: 5px;
}

.stampcontain{
  display: flex;
}

.mystamp{
  margin: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 6px;
  width: 93px;
  height: auto;
}

.mystamp:hover{
  transform: scale(1.1);
}

.mystamp img{
  width: 100%;
  height: 100%;
}

textarea {
  margin-top: 10px;
  height: 50px;
  border: 2px dashed var(--vbg);
  border-radius: 8px;
  padding: 5px;
  font-size: 0.75rem;
  font-family: monospace;
  resize: none;
  background: #fefefe;
  color: #2b3a74;
}

/* =================== Time-Calendar =================== */
.daytimebox {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg);
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  height: 70px;
  width: 200px;
  top: 10px;
  right: 10px;
}

.display-date {
  color: white;
  text-align: center;
  margin-bottom: 5px;
  font-size: .8rem;
  font-weight: 600;
}

.display-time {
  color: white;
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;  
  font-size: 1.7rem;
  border: 1px solid var(--lbg);
  padding: 0px 10px;
  border-radius: 5px;
  transition: ease-in-out 0.1s;
  transition-property: background, box-shadow, color;
}

.display-time:hover {
  background: var(--lbg);
  box-shadow: 0 0 30px var(--lbg);
  color: white;
  cursor: pointer;
}

/* =================== MusicBox =================== */
.musicplayer {
  display: flex;
  align-items: center;
  gap: 15px;
  background: white; /* Match site theme */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  height: 100px; /* Increased height for better layout */
  box-shadow: 0 0 5px rgba(118, 196, 229, 0.5); /* Subtle glow */
  box-shadow: inset 10px 0px 6px -10px #CCC, inset -10px 0px 6px -10px #CCC, inset 0px 10px 6px -10px #FFF, inset 0px -10px 6px -10px #CCC;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 300px;
}

.album-art-container {
  flex-shrink: 0; /* Prevent shrinking */
}

.album-art {
  display: block;
  max-width: 80px;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  image-rendering: pixelated;
  border: 1px solid var(--border); /* Add border for style */
}

.player-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.songtitlemarqueebox {
  overflow: hidden;
  width: 180px;
  height: 20px;
}

.songtitlemarquee {
  display: inline-block;
  white-space: nowrap; /* prevents wrapping */
  animation: move 8s linear infinite;
}

/*@keyframes move {
  0% { transform: translateX(105%); }
  80%  { transform: translateX(-0%); }
  100% { transform: translateX(-0%); }
}*/

.song-title {
  font-family: "Pixelated MS Sans Serif";
  font-size: 0.9rem;
  color: #2b3a74;
  text-align: center;
}

.buttons {
  display: flex;
  gap: 10px;
}

.buttons button {
  border: none;
  background: white;
  color: #d6dee7;
  font-size: 1rem;
  padding: 6px 10px;
  cursor: pointer;
  outline: none; /* Remove default outline */
  width: 55px; /* Fixed width for GIFs */
  height: 30px; /* Fixed height for GIFs */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons button:hover {
  background: transparent;
  color: var(--vbg);
  transform: scale(1.1); /* Slight zoom on hover */
}

/* Specific styling for play/pause GIFs */
#play img {
  margin-top: 8px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated; /* Match your site’s pixel art style */
}


/* Ensure prev/next buttons maintain consistency */
#prev, #next {
  width: 40px;
  height: 30px;
  font-size: 1.3rem;
}

.progress-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-display {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #2b3a74;
  margin-bottom: 1px;
}

#progress {
  width: 100%;
  height: 3px;
  background: #d6dee7; /* Lighter background for contrast */
  border-radius: 5px;
  outline: none;
  -webkit-appearance: none; /* Reset default appearance */
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Webkit browsers (Chrome, Safari, Edge) */
#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 5px;
  height: 3px;
  background: var(--vbg);
  transition: background 0.2s, transform 0.1s; /* Smooth transition */
}

/* Mozilla Firefox */
#progress::-moz-range-thumb {
  width: 5px;
  height: 3px;
  background: var(--vbg);
  transition: background 0.2s, transform 0.1s; /* Smooth transition */
}

/* Microsoft Edge (optional, for broader compatibility) */
#progress::-ms-thumb {
  width: 5px;
  height: 3px;
  background: var(--vbg);
}

/* =================== Total Visiter Counter =================== */
.totalvisiters{
  position: absolute;
  right: 0;
  bottom: 0;
}

/* =================== Footer =================== */
.footer{
  position: relative;
  background-color: var(--bg);
  text-align: center;
  margin: 0 auto 0 auto; 
  width: 1020px; 
  height: 80px;
  overflow: hidden; 
  /*border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;*/
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  z-index: 10;
}

.footer::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 57px;
  background: url("footerdecor.gif") repeat-x bottom center;
  pointer-events: none;
}
/* =================== Cursor =================== */
* {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1028.ani), url(https://cur.cursors-4u.net/nature/nat-11/nat1028.gif), auto !important;}