@font-face {
  font-family: "FineOMite";
  src: url(https://furple.neocities.org/assets/FINEO___.TTF) format("truetype");
}
@font-face {
  font-family: "segoe";
  src: url(https://furple.neocities.org/assets/segoe.ttf,),Segoe Script format("truetype");
}
@keyframes fufu-rotate {
  0% { rotate: -0.3deg; }
  50% { rotate: 0deg; }
  100% { rotate: 0.3deg; }
   
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 10px); }
100% { transform: translate(0, -0px); }
}


:root {
    --color1: #9142ff;
    --color2: #ba92ff;
    --color3: #f3d9fb;
}
 .navbar p.poopy {
        display: inline-block;
        margin: 0px;
        vertical-align: middle;
        overflow: hidden;
      }
      .ah {
position : absolute;
top : 16.4%;
right : 10px;
z-index: 11;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: sine-in-out;
}

      .navbar {
        overflow: hidden;
        background-image: url("https://furple.neocities.org/assets/skibibi.png");
        background-repeat: no-repeat; 
        background-size: 100% 100%;
        position: relative; /* changed from sticky to relative */
        top: 0;
        width: 100%;
        border-bottom: 2px solid #100327;
        filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.785));
        z-index: 10;
        padding: 2px 0px 2px 0px;
        text-align: center;
        height: 50px;
      }
body {

  margin: 0;
  padding-top: 24px;
  padding: 0%;
  background-image: url("https://furple.neocities.org/assets/labubu-macha-dubai.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background:url("https://furple.neocities.org/assets/noisenoise.png");
    min-height: calc(100vh - 337px);
    box-shadow: 2px 2px 10px 2px rgba(0,0,0,.4);

}
.speech:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 23px solid transparent;
	border-left-color: rgb(78, 22, 163);
	border-right: 0;
	margin-top: -23px;
	margin-right: -23px;
}
.speech{
    position: relative;
   width: 400px;
   height: auto;
    margin:auto;
  border: 2px solid #4e16a3;
  border-radius: 3px ;
  background-image: -moz-linear-gradient( 90deg, rgb(129,67,244) 9%, rgb(152,88,250) 23%, rgb(174,109,255) 51%, rgb(152,88,250) 55%, rgb(129,67,244) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(129,67,244) 9%, rgb(152,88,250) 23%, rgb(174,109,255) 51%, rgb(152,88,250) 55%, rgb(129,67,244) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(129,67,244) 9%, rgb(152,88,250) 23%, rgb(174,109,255) 51%, rgb(152,88,250) 55%, rgb(129,67,244) 100%);
text-align: center;
margin: auto;
padding: 10px;
filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.785));
}
.fufu {
   filter: drop-shadow(0px 0px 1px var(--color1)) drop-shadow(1px 0px 0px var(--color1)) drop-shadow(0px 1px 0px var(--color1)) drop-shadow(-1px 0px 0px var(--color1)) drop-shadow(0px -1px 0px var(--color1)) drop-shadow(0px 0px 1px black);
   width: 50%;
  rotate: 0deg;
  animation: fufu-rotate 0.5s infinite steps(1, end) alternate;
}

  .poopy1 {
      text-decoration: none;
    font-size: 30px;
  font-family: "segoe",Segoe Script, cursive;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/,0px 0px 4px #000000 ;
}
.poopy {
  text-decoration: none;
  font-size: 30px;
  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/, 0px 0px 4px #000000;
  transition: color 0.3s ease;
}
.poopylink {
  text-decoration: none;
  font-size: 30px;
  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/, 0px 0px 4px #000000;
  transition: color 0.3s ease;

}
  .navbar.poopy1 {
      text-decoration: none;
      /* scale with navbar height (adjust factor as needed) */
      font-size: calc(var(--navbar-height) * 0.6);
      font-family: "segoe",Segoe Script, cursive;
      color: rgb(217, 190, 255);
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/,0px 0px 4px #000000 ;
}
.navbar.poopy {
  text-decoration: none;
  font-size: calc(var(--navbar-height) * 0.6);
  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/, 0px 0px 4px #000000;
  transition: color 0.3s ease;
}
.navbar.poopylink {
  text-decoration: none;
  font-size: calc(var(--navbar-height) * 0.6);
  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/, 0px 0px 4px #000000;
  transition: color 0.3s ease;

}
.poopylink:hover {
  color: rgb(255, 230, 255);
}
.display {
    font-family: 'FineOMite';
    font-size: 30px;
    overflow: visible;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: radial-gradient(25% 90% at top, var(--color2) 30%, var(--color3) 66%, var(--color1) 66% 70%, var(--color2) 90%);
    filter: drop-shadow(0px 0px 1px var(--color1)) drop-shadow(1px 0px 0px var(--color1)) drop-shadow(0px 1px 0px var(--color1)) drop-shadow(-1px 0px 0px var(--color1)) drop-shadow(0px -1px 0px var(--color1)) drop-shadow(0px 0px 1px black);
}
.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-image: url("https://furple.neocities.org/assets/drctfgvbhjn.png"),
                    url("https://furple.neocities.org/assets/yhvdfgdfgd.png"),
                    url("https://furple.neocities.org/assets/babababa.png"),
                    url("https://furple.neocities.org/assets/udhauhdiusahd.png");
  background-blend-mode: screen, color-dodge, overlay, normal;
  background-position: center, center, center, center;
  background-repeat: repeat, repeat,  repeat, no-repeat;
  background-size: contain, contain, contain, 100% 100%;

  margin: auto;
  margin-top: 0.6%;
   margin-bottom: 0.6%; 
  clip-path: inset(0% 0% 0% 0% round 0px);
  padding: 20px;
  border: 3px solid #100327;
  border-radius: 3px ;
  width: 75%;         /* Fixed width */
  max-width: 55%;      /* Prevent overflow */
  min-width: 40%;
  box-sizing: border-box;
  height: max-content;
  filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.785));
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
  gap: 10px; /* Fixed small gap for all screens */
}
.wrapper2 {
  background-image: url("https://furple.neocities.org/assets/drctfgvbhjn.png"),
                    url("https://furple.neocities.org/assets/yhvdfgdfgd.png"),
                    url("https://furple.neocities.org/assets/babababa.png"),
                    url("https://furple.neocities.org/assets/udhauhdiusahd.png");
  background-blend-mode: screen, color-dodge, overlay, normal;
  background-position: center, center, center, center;
  background-repeat: repeat, repeat,  repeat, no-repeat;
  background-size: contain, contain, contain, 100% 100%;

  margin: auto;
  margin-top: 0.6%;
   margin-bottom: 0.6%; 
  clip-path: inset(0% 0% 0% 0% round 0px);
  padding: 20px;
  border: 3px solid #100327;
  border-radius: 3px ;
  width: 75%;         /* Fixed width */
  max-width: 55%;      /* Prevent overflow */
  min-width: 40%;
  height: max-content;
  filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.785));
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
.logo {
  display: inline-flex;
  margin-top: -1%;
}
.header {
clip-path: inset(0% 0% 0% 0% round 0px);
  background-image: url("https://furple.neocities.org/assets/banner.png");
  background-position: center;
  background-repeat: repeat;
  background-size: 100% 100%;
  width: 100%;
  aspect-ratio: 10 / 1;
  min-height: 100px;
    box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
    display: flex;
  flex-direction: row;
  justify-content: flex-end; /* 'right' is invalid; push content to the right */
  align-items: center;       /* vertical centering */
  
}
.gyatt{
  height: 100%;
  width: auto;             /* keep aspect via height */
  max-height: 100%;
  max-width: 67%;
  margin-top: 1.1%;
  margin-left: auto;       /* push to the right without consuming space */
  flex: 0 0 auto;          /* prevent flex shrinking */
  filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.785));
  animation: fufu-rotate 3s infinite steps(1, end) alternate;
  object-fit: contain;
}
.button {
  border-radius: 3px;
  background-image: url("https://furple.neocities.org/assets/buttonup.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  text-decoration: none;
  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 4px #000000;
  /* tween movement + shadow, keep background-image immediate (not animated) */
  transition: color 150ms ease,
              transform 140ms cubic-bezier(.22,.9,.32,1),
              box-shadow 140ms cubic-bezier(.22,.9,.32,1);
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
}

/* small button substyle */
.button.small,
.button--small {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 2px;
  margin: 2px 1px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
  background-size: 120% 120%; /* slightly zoomed for visual weight on small buttons */
  line-height: 1;
  vertical-align: middle;
}

/* pressed state override for small buttons (less travel) */
.button.small:active,
.button--small:active {
  transform: translateY(1px);
  box-shadow: 0px 0px 2px rgba(0,0,0,0.2) inset;
}

/* pressed state: changes image while the button is actively pressed, returns on release */
.button:active,
.button:focus-visible:active {
  background-image: url("https://furple.neocities.org/assets/buttondown.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateY(2px); /* tweened by transition above */
  box-shadow: 0px 0px 3px rgba(0,0,0,0.25) inset; /* pressed shadow */
}
 #gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .image-container {

  font-family: "segoe", Segoe Print, sans-serif;
  color: rgb(217, 190, 255);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black /* <- outline | shadow ->*/, 0px 0px 4px #000000;
  transition: color 0.3s ease;
              background-image: url("https://furple.neocities.org/assets/cool.png");

  background-blend-mode: screen, color-dodge, overlay, normal;
  background-position: center, center, center, center;
  background-repeat: repeat, repeat,  repeat, no-repeat;
  background-size: contain, contain, contain, 100% 100%;
            max-width: 200px;
            text-align: center;
            border-radius: 3px ;
             filter: drop-shadow(0px 0px 1.5px rgb(0, 0, 0));

        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 3px ;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.694);}

        .flex {
            display: flex;
            margin: 1em;
            gap: 100px;
        }
/* 
non gradient backrground
 background-image: url("https://furple.neocities.org/assets/cool.png");
  background-size: contain;
  background-repeat: no-repeat; 
background-size: 100% 100% ;
 */