/* General */
body {
  background: #0000aa url("BGSTAR.gif");
  background-size: 100px 100px;
  color: yellow;
  font-family: "Comic Sans MS", cursive, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}
img{  
  image-rendering: pixelated;    /* fuerza que se vean los píxeles grandes */
  image-rendering: crisp-edges;  /* en algunos navegadores funciona mejor */
  }

/* Header */
header {
  background: red;
  color: white;
  padding: 10px;
  border: 5px ridge yellow;
}
.fact {

  background: blue;
  color: white;
  padding: 10px;
  border: 5px ridge yellow; 
  font-size: 10px;
}

header h1 {
  margin: 0;
  font-size: 28px;
  text-shadow: 2px 2px black;

}

/* Contenido */
main {
  max-width: 700px;
  margin: 20px auto;
  padding: 10px;
  background: #2222aa;
  border: 5px outset lime;
}

/* Artículos */
article {
  margin: 20px;
  padding: 15px;
  background: black;
  border: 4px inset cyan;
  color: white;
}

article h2 {
  color: lime;
  font-size: 20px;
  text-decoration: underline;
}

.date {
  font-size: 12px;
  color: orange;
}
.delirium {
      color: #ccc; /* gris claro */
      display: inline-block;
      animation: delirant 0.1s infinite;
}
@keyframes delirant {
      0%   { transform: translate(0, 0) rotate(0deg); }
      20%  { transform: translate(-1px, 1px) rotate(-1deg); }
      40%  { transform: translate(-1px, -1px) rotate(1deg); }
      60%  { transform: translate(1px, 1px) rotate(0deg); }
      80%  { transform: translate(1px, -1px) rotate(1deg); }
      100% { transform: translate(0, 0) rotate(-1deg); }
    }

/* Footer */
footer {
  background: #ff00ff;
  color: white;
  padding: 10px;
  border-top: 4px ridge yellow;
  font-size: 12px;
}

/* Links estilo viejito */
a {
  color: cyan;
  text-decoration: underline;
}
a:hover {
  color: red;
  background: yellow;
}

#exit {
  position: fixed;
  top: 20%;
  right: 5%;
  z-index: 1000;

  width: 100px;
  height: 100px;                 /* Definí altura */
  background: url("IM/exit1.png") center / cover no-repeat;
}

#exit:hover{
  background-image: url("IM/exit.gif");
  animation: vibrar 0.2s infinite;
}
/* POPUP */
.popup {
  position: absolute;
  background: #1111aa;             /* Azul intenso */
  border: 5px ridge yellow;        /* Bordecito noventoso */
  box-shadow: 0 0 15px cyan;       /* Glow llamativo */
  color: white;
  font-size: 14px;
  width: 200px;
  z-index: 999;
  animation: aparecer 0.3s ease-out;
}

.popup-header {
  background: red;
  border-bottom: 3px inset lime;
  color: white;
  font-weight: bold;
  padding: 5px;
  text-align: left;
  text-shadow: 2px 2px black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-header .closeBtn {
  background: yellow;
  border: 2px outset red;
  font-weight: bold;
  color: black;
  cursor: pointer;
  padding: 0 5px;
}
.popup-header .closeBtn:hover {
  background: red;
  color: yellow;
}

.popup-body {
  background: black;
  border-top: 3px groove cyan;
  padding: 10px;
}

.popup-body img {
  width: 100px;
  height: auto;
  border: 3px ridge lime;
}
.popup-body img:hover {
  border: 3px inset red;
  background: yellow;
  animation: vibrar 0.2s infinite;
}
.type {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;                  /* oculta el texto */
  border-right: .15em solid black;   /* cursor */
  animation: typing 10s steps(40, end) forwards, 
             blink .7s step-end infinite;
}

@keyframes typing {
  from { width: 0ch; }
  to   { width: 1000ch; }  /* ajustar según el largo del texto */
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Animación entrada */
@keyframes aparecer {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Combiná translate + scale en la animación para no pisar transform */
@keyframes vibrar {
  0%   { transform: translate(0, 0) scale(1.03); }
  25%  { transform: translate(-2px,  2px) scale(1.03); }
  50%  { transform: translate( 2px, -2px) scale(1.03); }
  75%  { transform: translate(-2px, -2px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1.03); }
}