html {     
    margin: 0;     
    width: 100%;     
    height: 100%; 
}

body {
  position: relative;
  min-height: 100vh;
  background-image: url("https://64.media.tumblr.com/26f1f6e1da3042f177e27aa9c4bf458f/tumblr_o14svtyK6e1tcxdaso5_1280.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; 
  background-attachment: fixed;
}

body::before {
  content: ""; 
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px; 
  background-image: url("https://github.com/iyanabroch/iyanabroch.neocities.org/blob/main/INDEX/separador_corazonARRIBA.gif?raw=true");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 60px;
  z-index: 50;
}

body::after {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-image: url("https://github.com/iyanabroch/iyanabroch.neocities.org/blob/main/INDEX/separador_corazonABAJO.gif?raw=true");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 60px; 
  z-index: 50;
}

.imagen-fondo { 
  left: 245px;
  width: 40%;                     
  height: 100vh; 
  position: fixed;
  background-image: url("https://github.com/iyanabroch/iyanabroch.neocities.org/blob/main/INDEX/fondo_patroncuadros.png?raw=true");
  background-repeat: repeat;   
  background-size: 90px auto;               
  z-index: 49;
  box-sizing: border-box;
  overflow: hidden;
  border-width:8px;
  border-style:solid;
  border-image: url("https://i.ibb.co/h1Q3bFn/83-B27704-CEA1-4-B8-F-BF79-90-D624-EDC6-F6.png") 8 fill round;
}

.imagen-anime {
  width: 550px;
  height: auto;
  position: fixed;
  margin-top: 8px;
  margin-left: 844px;
  z-index: 51;
}

.blinkies-wrapper {
  position: absolute;
  top: 540px;  
  left: 0;
  width: 150%;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}

.blinkies {
  display: flex;
  gap: 0px;                  
  animation: moveLeft 15s linear infinite;
}

.blinky {
  height: 60px;            
  width: auto;
}

@keyframes moveLeft {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.imagen-welcome {
  position: fixed;
  top: 75px;
  left: 36%;
  transform: translateX(-50%);
  z-index: 53;
  width: 450px;    
}

.imagen-floating {
  height: auto;
  display: block;
  animation: floating 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes floating {
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-50%) translateY(15px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.caja-wrapper {
  position: fixed;
  top: 305px;
  left: 375px;
  width: 300px;
  height: 80px;
  z-index: 52;
}

.borde {
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  padding: 1rem;
  border: 3px dotted #8ad2ff;
}

.barra {
  position: relative;
  overflow: scroll;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  padding: 1rem;
}

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

    ::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }

    ::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }

    ::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

    ::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }

    ::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }

    ::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }

.fondo {
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  padding: 1rem;
  background-color: #ff8ad3;
}

.imagen-separadorflores {
  width: 32%;
  height: auto;
  position: fixed;
  top: 260px;
  left: 310px;
  z-index: 52;
}

.boton-wrapper {
  position: fixed;
  top: 450px;
  left: 470px;
  z-index: 52;
}

.imagen-boton {
  width: 140px;            
  height: auto;
  cursor: pointer;
}

.imagen-shakehover:hover {
  animation: shake 0.5s infinite;
  filter: blur(1px);
  transition: 0.3s ease-in;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.imagen-gato {
  position:fixed;
  width: 110px;
  top: 500px;
  left: 290px;
  z-index: 54;
  
}