/* Fuente local que usa tu index.html */
@font-face { font-family:'MiFuente'; src:url('fonts/disposabledroid-bb.regular.ttf'); }

/* Página centrada, fondo negro */
body{
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;                 /* oculta scroll si algo se pasa */
}

/* Contenedor 450x650 con fondo y pixel-art */
#container{
  position:relative;
  width:450px;
  height:650px;
  background:url('asd.gif') center/cover round; /* poné tu fondo equivalente */
  image-rendering:pixelated;
  overflow:hidden;
}

/* Frame animado de fondo (tus 1..32.png) */
#frameContainer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  image-rendering:pixelated;
  will-change:background-image;
}

/* Canvas centrado por transform */
#myCanvas{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  image-rendering:pixelated;
  will-change:transform;
}

/* Texto del “pecho” + glitch (exacto a tu index.html) */
#outerDiv,#innerDiv{
  width:90px;height:11px;background-color:#111;background-image:url('fondo.png');background-repeat:round;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;image-rendering:pixelated;
  font-family:'MiFuente',sans-serif;font-size:12px;line-height:11px;color:#f0f0f0;text-align:center;overflow:hidden;
}
#outerDiv{position:absolute;padding-top:0;padding-bottom:2px;top:82%;left:50%;transform:translate(-50%,-50%) scale(5);transform-origin:center;}
#innerDiv::before,#innerDiv::after{
  content:attr(data-text);position:absolute;width:100%;height:50%;top:0;left:0;background-image:url('fondo.png');background-repeat:round;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#f0f0f0;
}
#innerDiv::before{clip-path:inset(0 0 16% 0);}
#innerDiv::after{bottom:0;clip-path:inset(55.9% 0 0 0);height:11px;filter:hue-rotate(var(--hue-rotate-value));right:1px;}
#glitchLayer{
  position:absolute;top:0;left:0;width:100%;height:8px;line-height:11px;text-align:center;font-size:12px;font-family:'MiFuente',sans-serif;
  color:#f0f0f0;background-color:#111;background-image:url('fondo.png');background-repeat:round;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:glitchEffect 1.6s infinite;clip-path:inset(60% 0 22% 0);
}
@keyframes glitchEffect{0%,38%,55.1%,100%{transform:translateX(0);}38.1%,50%,55%{transform:translateX(1px);}}